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，以及反應 - 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

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/目錄加載常規權重。

我更改了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