javascript - Font Awesome 5 图标不适用于 React ("Could not find icon"错误)

Question

我正在尝试在我的 React 项目中使用 Font Awesome 5 Pro(我有许可证)，并且我已按照 API 中的说明进行操作尽我所能，但我仍然遇到问题。

在我的项目中，我使用 npm 安装了 fontawesome、fontawesome-common-types、fontawesome-pro-light、fontawesome-pro-regular、fontawesome-pro-solid 和 react-fontawesome。所有这些文件夹都在我的 node_modules/@fortawesome/目录中

在我的 App.js 中，我有这些导入(这不是整个文件，只是相关的片段):

import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faSpinnerThird, faCircle} from '@fortawesome/fontawesome-pro-regular/';

fontawesome.library.add(faSpinnerThird, faCircle);

然后我有另一个组件 Spinner.js，代码如下:

import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

const spinner = () => (
    <div className="fa-layers fa-fw">
        <FontAwesomeIcon icon="circle" color="#ddd" />
        <FontAwesomeIcon icon="spinner-third" color="#aaa" spin />
    </div>
);

export default spinner;

在另一个组件中，我正在导入 Spinner 组件并有条件地渲染它，但是当它被渲染时，我在浏览器控制台中收到以下错误:

Could not find icon
Object { prefix: "fas", iconName: "circle" }

Could not find icon
Object { prefix: "fas", iconName: "spinner-third" }

我是 React 的新手，但我认为我已经正确地遵循了 FontAwesome 的 React API 中的说明。知道我可能哪里出错了吗？

Answer 1

我认为问题是因为默认情况下前缀是 fas(Font Awesome Solid)所以在这种情况下:

<FontAwesomeIcon icon="circle" color="#ddd" />

它正在寻找 fas 中的 circle 图标，但是，您想使用 fontawesome-pro-regular 中的 faCircle

import {faSpinnerThird, faCircle} from '@fortawesome/fontawesome-pro-regular/';

所以我想你想写这样的东西

<FontAwesomeIcon icon={["far", "circle"]} color="#ddd" />

此外，如果您不知道库的前缀是什么，您可以这样做

fontawesome.icon(faPlus).abstract

这会给你一个像这样的对象:

[{
"tag": "svg",
"attributes": {
  "data-prefix": "fa",
  "data-icon": "user",
  "class": "svg-inline--fa fa-user fa-w-16",
  "role": "img",
  "xmlns": "http://www.w3.org/2000/svg",
  "viewBox": "0 0 512 512"
},
"children": [
  {
    "tag": "path",
    "attributes": {
      "fill": "currentColor",
      "d": "M96…112z"
    }
  }
]
}]

https://fontawesome.com/how-to-use/font-awesome-api