为什么部分免费FontAwesome图标无法在React项目中导入使用？

Font Awesome 5.x 版本的免费图标拆分存放在三个独立的 npm 包中，不同视觉风格的图标归属在不同的包下，你遇到的导入失败不是图标不免费，而是没有从对应归属包导入：

• @fortawesome/free-solid-svg-icons：存放所有实心风格的免费图标，你要导入的搜索实心图标就归属在这个包内
• @fortawesome/free-regular-svg-icons：存放所有 Regular 风格（线性/空心）的免费图标，你之前正常导入的评论气泡图标faComment就属于这个包
• @fortawesome/free-brands-svg-icons：存放所有品牌类的免费图标，比如 GitHub、微信等品牌标识图标都在这个包内

完全兼容你当前使用的<FontAwesomeIcon />组件语法，不需要切换i标签写法：

1. 先确认你已经安装了实心图标包，未安装的话执行对应安装命令：

   # npm 安装
   npm install @fortawesome/free-solid-svg-icons
   # yarn 安装
   yarn add @fortawesome/free-solid-svg-icons
   

2. 从实心图标包导入搜索图标：

   import { faSearch } from '@fortawesome/free-solid-svg-icons'
   

3. 直接用现有组件语法调用即可：

   <FontAwesomeIcon icon={faSearch} />
   

如果后续需要导入其他免费图标，只需要确认图标对应的风格标识，从对应包导入即可；如果需要同时导入不同风格的同名图标，可以在导入时重命名区分，例如：

import { faSearch as faSearchSolid } from '@fortawesome/free-solid-svg-icons'
import { faSearch as faSearchRegular } from '@fortawesome/free-regular-svg-icons'

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