Font Awesome 5个图标无法使用React（“找不到图标”错误） [英] Font Awesome 5 icons not working with React ("Could not find icon" error)

问题描述

我正在尝试在我的React项目中使用Font Awesome 5 Pro（我有许可证），并且我已按照 API 尽我所能，但我仍然遇到问题。

I'm trying to use Font Awesome 5 Pro (I have a license) in my React project, and I've followed the instructions in the API to the best of my ability, but I'm still having issues.

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

In my project, I used npm to install fontawesome, fontawesome-common-types, fontawesome-pro-light, fontawesome-pro-regular, fontawesome-pro-solid, and react-fontawesome. All those folders are in my node_modules/@fortawesome/ directory

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

In my App.js, I have these imports (this isn't the whole file, just the relevant snippets):

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，代码如下：

Then I have another component, Spinner.js, with this code:

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组件并有条件地渲染它，但是当它被渲染时，我在浏览器控制台中收到这些错误：

In another component, I'm importing the Spinner component and rendering it conditionally, but when it gets rendered, I get these errors in my browser console:

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

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

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

I'm pretty new to React, but I think I've followed the instructions in FontAwesome's React API correctly. Any idea where I might be going wrong?

推荐答案

我认为问题是因为默认情况下前缀是fas（Font Awesome Solid） ）所以在以下情况下：

I think the problem is becuase by default the prefix is fas (Font Awesome Solid) so in the case of:

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

它正在寻找圈图标但是，你想要使用来自 fontawesome-pro-regular的faCircle

it is looking for the circle icon in the fas, however, you want to use the faCircle from fontawesome-pro-regular

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

所以我想你想要写一些像

So I think you want to write something like

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

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

Also if you dont know what the prefix of is of the library you can do

fontawesome.icon（faPlus）.abstract

这会给你像这样的对象：

which will give you an object like:

[{
"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

这篇关于Font Awesome 5个图标无法使用React（“找不到图标”错误）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！