React JS中添加FontAwesome图标不显示的解决方案

• 引入方式冲突：同时使用了npm安装的v6版本FontAwesome React组件方案，和index.html中引入的v5.3.1版本CDN方案，两个版本类名规则、渲染逻辑不一致，会互相干扰。
• 组件传参错误：@fortawesome/react-fontawesome 的icon属性不支持传入"fa-solid fa-home"这类字符串格式的原生类名，必须传入显式导入的图标对象，或全局注册后的图标标识，传字符串时组件无法识别对应图标，自然无法渲染。
• 语法不兼容：原生<i>标签写法中使用了class属性，React中DOM元素的类名属性必须写为className，否则属性不会正确挂载；同时v5版本CDN不识别v6的fa-solid类名规则，原生标签也无法正常渲染图标。

两种方案二选一即可，禁止混用避免冲突，优先推荐第一种React组件化方案。

方案1：React组件按需引入（推荐） #

该方案无全局污染，支持按需加载，打包体积更小，符合React开发规范。

1. 清理冲突内容：删除public/index.html中引入FontAwesome CDN的script标签。
2. 现有npm依赖无需调整，直接在使用图标的组件中按需导入对应图标即可，示例代码如下：

// ./src/App.js
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// 按需导入需要使用的实心图标，图标名为驼峰格式，以fa开头
import { faHome, faEdit } from "@fortawesome/free-solid-svg-icons";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {/* 直接传入导入的图标对象，不要传字符串类名 */}
      <FontAwesomeIcon icon={faHome} />
      <div>hello</div>
      <FontAwesomeIcon icon={faEdit} />
      <div>hello</div>
    </div>
  );
}

如果不想每个组件单独导入图标，可以在项目入口文件（一般是src/index.js）全局注册图标库：

// ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faHome, faEdit } from '@fortawesome/free-solid-svg-icons';

// 将需要使用的图标加入全局库
library.add(faHome, faEdit);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

全局注册后，组件内无需单独导入图标，可通过数组格式传参使用：

<FontAwesomeIcon icon={['fas', 'home']} />

方案2：CDN原生标签引入 #

如果不想使用React组件，也可以统一用CDN方式引入，直接用原生标签渲染图标。

1. 卸载冲突的npm依赖，执行命令：

   npm uninstall @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
   

2. 将public/index.html中的CDN地址替换为你需要使用的对应版本地址，注意v5和v6版本的类名规则差异。
3. 组件内不要使用FontAwesomeIcon组件，直接用<i>标签渲染，注意将class替换为React要求的className属性，示例代码如下：

// ./src/App.js
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {/* 以v6版本CDN为例，使用对应版本的类名，类名属性写为className */}
      <i className="fa-solid fa-house"></i>
      <div>hello</div>
      <i className="fa-solid fa-pen-to-square"></i>
      <div>hello</div>
    </div>
  );
}

注意：使用CDN方案时要保证引入的CDN版本和代码中使用的类名完全匹配，避免出现类名不存在导致的方块图标问题。

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