Question

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCopy, faQuestionCircle, faQrcode, faGithub } from '@fortawesome/free-solid-svg-icons';

import AddressList from './components/AddressList';

library.add(faCopy, faQuestionCircle, faQrcode, faGithub);

我有这段代码在React中导入App.js中的字体图标。我正在使用免费版本。

我收到此错误：

Failed to compile.

./src/App.js
Attempted import error: 'faGithub' is not exported from '@fortawesome/free-solid-svg-icons'.

现在我只能理解的是，免费版本也许没有github图标？但是在他们的网站上：https://fontawesome.com/icons?d=gallery&q=github&m=free

^这是免费过滤和github过滤的。我现在在这里看到了，为什么我会这样菜鸟？

"@fortawesome/fontawesome-svg-core": "^1.2.6",
"@fortawesome/free-solid-svg-icons": "^5.4.1",
"@fortawesome/react-fontawesome": "^0.1.3",

^我的package.json

另一个快速的问题，字体真棒在文件树中的什么位置？我在任何地方都找不到。

Answer 1

嘿，所以我遇到了同样的问题，过去一个小时左右让我发疯了哈哈。基本上，他们已经将所有字体真棒图标拆分为自己的“包”或其他内容。我认为，当您单击“图标”选项卡时，在其侧栏中的网站上可以看到四种分类。他们是class B extends A { id: string = this.id;。

对于GitHub图标，它在brand软件包中，因此要修复它，您需要做的就是用yarn或npm安装brand软件包并导入。

Solid, Regular, Light, and Brands

然后在.js组件中要添加图标

$ yarn add @fortawesome/free-brands-svg-icons

在这里，我同时包含了coffee图标和github图标，以显示两个不同的图标。

这使我相信以下内容适用于Font Awesome中的任何图标...

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons'

class Main extends Component {

  render(){
    return(
      <div className="main">
        <h2> Hello Main! </h2>
        <FontAwesomeIcon icon={faCoffee} />
        <FontAwesomeIcon icon={faGithub} />
      </div>
    );
  }
};

然后

yarn add @fortawesome/free-[ICON PACKAGE]-svg-icons

但我不确定。无论如何，希望对您有所帮助！

干杯！

更新：

对于将来可能偶然发现类似问题的任何人，我实际上建议使用import { [ICON NAME] } from '@fortawesome/free-[ICON PACKAGE]-svg-icons'; npm软件包。它包含一大堆受欢迎的图标源（包括FontAwesome），并且仅具有导入所需内容的功能。您可以在https://react-icons.netlify.com/#/

签出

Answer 2

运行此命令并导入：

npm我-保存@ fortawesome / free-brands-svg-icons 或纱线添加--save @ fortawesome / free-brands-svg-icons;
从“ @ fortawesome / free-brands-svg-icons”导入{faGithub}；
从“ @ fortawesome / free-solid-svg-icons”导入{faCopy，faQuestionCircle，faQrcode}；

[NB] ：社交图标被称为品牌图标，因此所有社交图标都将从 free-brands-svg-icons 导入，而其他社交图标将从导入> free-solid-svg-icons

无法导入fontawesome图标

2 个答案: