CODEWITHSUNDEEP
javascriptreactjsantd
Four
Four

Reputation: 154

Rendering Ant Design icons from an array

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

Upvotes: 0

Views: 1016

Answers (1)

Taghi Khavari
Taghi Khavari

Reputation: 6582

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

Upvotes: 1

Related Questions