React应用中Font Awesome图标不显示，是否需引入CDN链接？

前置说明 #

你已经通过npm安装了Font Awesome的组件化资源包，完全不需要像传统HTML项目那样额外添加CDN链接。CDN是没有本地安装资源时的轻量引入方案，在已经安装npm包的React项目中添加CDN，反而可能出现资源重复加载、样式冲突的问题。

代码存在的明确问题 #

• 缺失依赖包：你在代码中导入了@fortawesome/free-brands-svg-icons包中的fab集合，但最初的安装列表里并不包含这个包，这会直接触发编译报错，导致页面代码无法正常运行，图标自然无法显示。需要补装这个依赖：

  npm install --save @fortawesome/free-brands-svg-icons
  

• 全量导入的冗余问题：代码中library.add(fab, faCheckSquare, faShare)里的fab是整个品牌图标的全量集合，这种写法会把所有品牌类图标都打进最终的打包文件，大幅增加包体积，完全没有必要。
• 全局初始化的位置不合理：把library.add的逻辑写在业务组件内部，会在组件每次加载时重复执行初始化逻辑，拖慢组件渲染速度。

两种可正常运行的实现方案 #

方案1：组件内按需导入（推荐，出错率最低） #

不需要配置全局library，在用到图标的组件里直接导入需要的图标对象，传给FontAwesomeIcon组件即可，完全规避前缀匹配、全局注册带来的问题：

import React from 'react';
import { Button } from 'react-bootstrap';
import './ContactUs.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
// 直接导入需要用到的分享图标
import { faShare } from '@fortawesome/free-solid-svg-icons'

class ContactUs extends React.Component{
    render(){
        return(
            <div>
               <Button className="btn send-button mt-4"> 
                  SUBMIT
                  <FontAwesomeIcon icon={faShare} />
               </Button>
            </div>
        )
    }
}
export default ContactUs;

方案2：全局library注册（适合多页面复用同个图标的场景） #

如果确实需要用全局注册的方式减少重复导入，需要遵守几个规则：

1. 把library.add的逻辑移到项目入口文件（如src/index.js），只执行一次初始化
2. 不要全量导入fab集合，按需导入需要用到的品牌图标即可
3. 用字符串形式渲染图标时，默认匹配solid类别的图标，你注册的faShare属于solid类别，icon="share"的写法可以正常匹配

// src/index.js 中的初始化代码
import { library } from '@fortawesome/fontawesome-svg-core'
// 按需导入需要的图标
import { faCheckSquare, faShare } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from '@fortawesome/free-brands-svg-icons'
library.add(faCheckSquare, faShare, faGithub)

排查提示：如果修正后图标仍不显示，可以打开浏览器开发者工具的控制台，查看模块缺失、图标未注册类的报错，顺着提示就能快速定位问题。

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