How to dynamically render list of fontawesome icons in react that shows error "Could not find icon {prefix: 'fas', iconName: 'faChartLine'"

Question

I have a list route with fontAwesome icon declared in it link this -

const navigationList = [
    {
      pageName: "Dashboard",
      path: "/",
      iconName: `faChartLine`
    },
    {
      pageName: "Bus Information",
      path: "/bus-info",
      iconName: `faBus`
    },
    {
      pageName: "Organization Chart",
      path: "/org-chart",
      iconName: `faSitemap`
    }
  ]

Then, I loop through the array and place it in the Link like this -

{
  navigationList.map((link, index) => {
   return (
      <Link
       to={link.path}
       key={index}
       className={`text-2xl text-gray-500 font-bold p-2`}
      >
       <FontAwesomeIcon icon={link.iconName} className={"mr-4"}></FontAwesomeIcon>{link.pageName}
     </Link>
  )
})
}

I see no error in terms of writing the code. But, somehow it shows me index.es.js:278 Could not find icon {prefix: 'fas', iconName: 'faChartLine'}

I tried console log the list and the iconName appears in the console with no error.

Please need your help here. Thanks

Answer 1

Looks like the problem comes from adding the Individual Icons Explicitly which doesn't work with rendering icons dynamically.

I look through again in fontawesome doc, Add Icons Globally section and found the answer.

• import library and fas from fontawesome.
• add the icons you want to use into the library with add() method like this - library.add(fas, faTwitter, faFontAwesome, faHatCowboy, faHatChef)
• use the icon name without fa in front of it.
• use syntax like this in fontawesome component -> icon={["fas", "icon-name"]}

This solved my case.