CODEWITHSUNDEEP
reactjs
Timothy Nyambane
Timothy Nyambane

Reputation: 13

How to map React Icons in react

I have the icon imports above

import { MdSettings } from "react-icons/md";
import { RiAccountPinCircleFill } from "react-icons/ri";
import { BsSunFill } from "react-icons/bs";

then here is the array containing the imports

const Icons = ["MdSettings", "RiAccountPinCircleFill", "BsSunFill"];

I want to map it here

<div className="topbar-links inline-flex">
        <ul>*this is where I want it rendered*</ul>
</div>

Upvotes: 0

Views: 1893

Answers (2)

Manish Sencha
Manish Sencha

Reputation: 315

If the icons are react components you can store the icons as

const Icons = [<MdSettings/>, <RiAccountPinCircleFill/>, <BsSunFill/>]

then you can map them as

<div className="topbar-links inline-flex">
        <ul>{Icons.map((icon, index) => <li key={index}>{icon}</li>}</ul>
</div>

Upvotes: 0

Arkellys
Arkellys

Reputation: 7780

First of all, if your variable is not a component, you should avoid to use PascalCase for the name. So you can rename Icons as icons.

Then, you should store the elements imported directly in the array and not just their names as string, or you will not be able to use the components:

const icons = [MdSettings, RiAccountPinCircleFill, BsSunFill];

Finally, for the loop you can do like this:

<div className="topbar-links inline-flex">
   <ul>
      {icons.map((Icon, i) => (
         <li key={i}>
            <Icon />
         </li>
      ))}
   </ul>
</div>

Upvotes: 2

Related Questions