Skip to main content

Dynamically Rendering React Icons in Menu Based on API Data

· 4 min read

In this article, we will guide you through the process of using dynamic React Icons in the Menu. This feature is especially useful when you need to render icons dynamically based on data received from an API.

You will have to create a helper component, DynamicIcon, to simplify this process. This component leverages Next.js's dynamic import feature to load icons on demand, thereby optimizing your application's performance.

Getting started​

Before we dive into the implementation details, ensure that your project is set up and running. You should also have the react-icons package installed in your template. If you haven't already installed it yet, you can do so by running the following command:

pnpm install react-icons

Understanding the DynamicIcon component​

The DynamicIcon component is designed for integrating dynamic icon rendering. It leverages Next.js's dynamic import feature from next/dynamic to load icons on demand. This helps to optimize your application's performance by only loading the icons that are required. This component is particularly useful for applications that need to render icons dynamically based on data received from an API.

  • Dynamic Imports with Next.js: Utilizes Next.js's dynamic function to import dynamically based on the component's props.
  • iconFamily prop: Determines the library from which to import the icon (e.g., fa for Font Awesome, fi for feather icons). This prop makes the component versatile allowing it to support multiple icon libraries with ease.
  • icon prop: Specifies the exact icon to be dynamically imported from the chosen library.
  • Fallback Icons: Provides a default fallback icon for each library to handle cases where the specified icon cannot be found. This feature ensures that your UI remains consistent and error-free, even when an icon is missing or incorrectly named.
  • Expandability: The DynamicIcon component is designed to be easily expandable. You can include as many icon libraries as you need by importing them and adding them to the Icons object with appropriate fallbacks.

How to make this work in the template​

To use the DynamicIcon component, you need to follow these steps:

  1. Copy the DynamicIcon component code from the snippet below and paste it into a new file in your project, such as DynamicIcon.tsx/DynamicIcon.js respectively for TypeScript or JavaScript version in the src/components directory.


  2. Now you need to import the DynamicIcon component into src/components/GenerateMenu.tsx and use it like the following:

    - const icon = <i className={menuItem.icon} />
    + const icon = menuItem.icon && menuItem.iconFamily && (
    +   <DynamicIcon iconFamily={menuItem.iconFamily} icon={menuItem.icon} />
    + )

    - const { children, ...rest } = subMenuItem
    + // eslint-disable-next-line @typescript-eslint/no-unused-vars
    + const { children, iconFamily, ...rest } = subMenuItem

    - <VerticalSubMenu key={index} {...rest} icon={icon}>
    + <VerticalSubMenu key={index} {...rest} icon={icon || undefined}>

    Add this before returning the VerticalMenuItem component:

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { iconFamily, ...rest } = menuItem
    - <VerticalMenuItem key={index} {...menuItem} href={href} icon={icon}>
    + <VerticalMenuItem key={index} {...rest} href={href} icon={icon || undefined}>

  3. Now update src/types/menuTypes.ts file, add iconFamily for VerticalMenuItemDataType and VerticalSubMenuDataType for TypeScript version only.

    export type VerticalMenuItemDataType = Omit<VerticalMenuItemProps, ...> & {
      ....
      iconFamily?: string
    }

    export type VerticalSubMenuDataType = Omit<VerticalSubMenuProps, ...> & {
      ...
      iconFamily?: string
    }

That's it! You have successfully integrated the DynamicIcon component into your template. You can now dynamically render icons based on data received from an API.

tip

You can do the same for Horizontal Menu, to use dynamic icons.

tip

If you want to use a different library than react-icons, you can take the DynamicIcon component as a reference or ispiration and create your own component. All you need to figure out is how to dynamically import the icons from the library you are using like prop-types, etc.