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

score 0 · Answer 1 · answered Sep 28 '22 at 14:42

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.

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

1 Answers1