Dynamically Rendering React Icons in Menu Based on API Data
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
- yarn
- npm
pnpm install react-icons
yarn install react-icons
npm 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.
Key Featured of the DynamicIcon
component:
- 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:
-
Copy the
DynamicIcon
component code from the snippet below and paste it into a new file in your project, such asDynamicIcon.tsx
/DynamicIcon.js
respectively for TypeScript or JavaScript version in thesrc/components
directory. -
Now you need to import the
DynamicIcon
component intosrc/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}> -
Now update
src/types/menuTypes.ts
file, add iconFamily forVerticalMenuItemDataType
andVerticalSubMenuDataType
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.
You can do the same for Horizontal Menu, to use dynamic icons.
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.