无法导入 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 图标以进行反应。我正在使用免费版本。

我收到此错误：

编译失败。

./src/App.js 尝试导入错误：“faGithub”未从“@fortawesome/free-solid-svg-icons”导出。

现在我所能理解的是，免费版本也许没有 github 图标？但是在他们的网站上。

那是免费和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

嘿，所以我遇到了同样的问题，这让我在过去一个小时左右发疯了哈哈。基本上，他们已将所有字体真棒图标拆分为自己的“包”或其他东西。我认为当您单击“图标”选项卡时，可以在侧栏中看到他们网站上的四个类别。他们是Solid, Regular, Light, and Brands。

对于 GitHub 图标，它位于brands 包中，因此您只需使用yarn 或npm 安装brand 包并导入它即可修复它。

$ 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-iconsnpm 包。它包含大量流行的图标源（包括 FontAwesome），并且还具有仅导入您需要的功能。您可以在https://react-icons.netlify.com/#/ 上查看