Background info:
I'm using react and Ant Design.
To keep the code clean, I populate menu items from a const array, like so:
const menuItems = [
{ label: "Home", path: "/home" },
{ label: "Accounts", path: "/accounts" },
{ label: "Organizations", path: "/organizations" },
];
Each item in the array is an object containing a label and a redirect path. I map over the items when rendering. Very basic.
Problem:
I would like to include an antd icon component in the menuItems array so the icon can be rendered next to the label. But I can't find a way to reference the icons by a name string
My problem is like this problem but is ant design Rendering Material-UI icons from an array
Any suggestions on how to do this? Thanks
you can modify your menuItems to something like this:
const menuItems = [
{ label: "Home", path: "/home", icon: <span class="custom-icon" /> },
{
label: "Accounts",
path: "/accounts",
icon: <span class="custom-icon" />
},
{
label: "Organizations",
path: "/organizations",
icon: <span class="custom-icon" />
}
];
and instead of using span with the class of custom-icon you can use any Icon you desire and then render it accordingly