如何在 React 中使用 FontAwesome 图标库？答案

【问题标题】：How to use the FontAwesome Icon Library in React?如何在 React 中使用 FontAwesome 图标库？
【发布时间】：2021-05-08 16:46:13
【问题描述】：

我有一个使用 FontAwesome 图标的 React 项目。为了保持代码干燥，我想使用图标库将我的图标导入保存在一个单独的文件中，按照此处的指南：https://fontawesome.com/how-to-use/javascript-api/setup/library。

我添加了一个fontawesome.js 文件，代码如下：

import { library } from "@fortawesome/fontawesome-svg-core";

import { faCode, faHighlighter } from "@fortawesome/free-solid-svg-icons";

library.add(faCode, faHighlighter);

并将fontawesome.js 导入我的index.js。然后我尝试将faCode 渲染到我的Icon.js 组件：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default function Icon() {
  return (
    <div>
        <FontAwesomeIcon icon={['fas', 'fa-code']} />
    </div>
  );
}

只遇到以下错误：

Could not find icon {prefix: "fas", iconName: "fa-code"}

我想我在这里缺少一个导入。文档并没有完全清楚地说明图书馆建立后要做什么。有什么想法吗？

【问题讨论】：

如果您将<FontAwesomeIcon icon={['fas', 'fa-code']} /> 替换为<FontAwesomeIcon icon={['fas', 'faCode']} /> ？
这是另一种在 react 中缓存字体的方法。从此LINK找到它
@antoineso 对我不起作用：/
@hrghafoori 这对我有用！似乎我在爬错文档。感谢您为我指明正确的方向！随时发布作为标记为已接受的答案。
尝试放代码而不是faCode。

标签： reactjs font-awesome font-awesome-5 react-font-awesome

【解决方案1】：

您需要从 fontawesome 导入实体（带有 'fas' 标签）图标：

npm i @fortawesome/free-solid-svg-icons 要么纱线添加@fortawesome/free-solid-svg-icons

【讨论】：

【解决方案2】：

这是另一种在 react 中缓存字体的方法。从此LINK找到它

【讨论】：