无法导入 Font Awesome 图标

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);

我有这段代码可以在 App.js 中导入 fontawesome 图标。我用的是免费版。

我收到这个错误：

Failed to compile.

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

现在我只能试着理解免费版本可能没有 github 图标？然而在他们 website.

即免费过滤 github。我现在看到了为什么我这么菜鸟？

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

^ my package.json

另一个简单的问题，font awesome 在文件树中的什么位置？我到处都找不到。

Answer 1

嘿，所以我运行遇到了同样的问题，在过去的一个小时左右，它让我发疯了哈哈。基本上，他们将所有超棒的字体图标拆分成它们自己的 "packages" 之类的东西。当您单击 'icons' 选项卡时，我认为在他们的网站侧边栏中可以看到四个类别。他们是 Solid, Regular, Light, and Brands.

对于 GitHub 图标，它在 b运行ds 包中，所以你需要做的就是用 yarn 安装 b运行d 包来修复它或 npm 并导入它。

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

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

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>
    );
  }
};

这里我包括咖啡图标和 github 图标以显示两个不同的图标。

这让我相信以下应该适用于 Font Awesome 中的任何图标...

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

然后

import { [ICON NAME] } from '@fortawesome/free-[ICON PACKAGE]-svg-icons';

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

干杯！

更新：

对于将来可能偶然发现类似问题的任何人，我实际上建议使用 react-icons npm 包。它包含大量流行的图标源（包括 FontAwesome），还具有仅导入您需要的功能。您可以在 https://react-icons.netlify.com/#/

查看

Answer 2

运行这个命令并导入：

npm i --save @fortawesome/free-brands-svg-icons 或 yarn add --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

导入

无法导入 Font Awesome 图标

Can't import Font Awesome icon

reactjs

font-awesome-5