React动态渲染FontAwesome图标报错：找不到指定图标

问题场景 #

定义导航路由列表并循环渲染Link组件时，出现报错：

index.es.js:278 Could not find icon {prefix: 'fas', iconName: 'faChartLine'}

虽能通过console.log看到列表中的iconName，但图标无法正常加载。

解决方法 #

方法一：直接导入并使用图标变量 #

FontAwesome React组件要求icon属性传入的是图标对象而非字符串，需先导入对应图标再修改导航列表：

1. 导入所需图标及组件：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChartLine, faBus, faSitemap } from '@fortawesome/free-solid-svg-icons';

2. 修改导航列表，将iconName替换为导入的图标变量：

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

3. 渲染时直接使用link.icon：

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

方法二：通过Library注册图标（支持字符串调用） #

若希望保留字符串形式的iconName，可在项目入口文件将图标注册到FontAwesome Library：

1. 在入口文件（如index.js）中导入Library并注册图标：

import { library } from '@fortawesome/fontawesome-svg-core';
import { faChartLine, faBus, faSitemap } from '@fortawesome/free-solid-svg-icons';

// 将需要的图标添加到library
library.add(faChartLine, faBus, faSitemap);

2. 此时原有代码可直接正常运行，无需修改导航列表和渲染逻辑——Library已注册目标图标，FontAwesomeIcon能通过字符串iconName匹配到对应资源。

报错原因 #

之前的代码将字符串iconName传给FontAwesomeIcon的icon属性，但既未将对应图标注册到Library，也未导入图标对象，导致组件无法找到匹配的图标资源。

内容的提问来源于stack exchange，提问作者Htet