Font Awesome 5 图标不适用于 React（“找不到图标”错误）

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 中，我有这些导入（这不是整个文件，只是相关的 sn-ps）：

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

Answer 2

我想通了！

默认情况下，FontAwesomeIcon 组件使用“fas”前缀（用于 Font Awesome Solid）。您可以在我上面发布的错误代码中看到这一点。但是，我试图从 /font-awesome-pro-regular/ 目录加载 Regular 权重。

我更改了 FontAwesomeIcon 组件以使用正确的前缀，如下所示：

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

现在它按预期工作了。

Answer 3

更改您的 App.js 以单独包含每个图标，我相信您可能正在解构 Icon 对象。

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

fontawesome.library.add(faSpinnerThird, faCircle);

这是根据此处的 API 建议：https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently