无法导入 Font Awesome 图标答案

【问题标题】：Can't import Font Awesome icon无法导入 Font Awesome 图标
【发布时间】：2019-05-09 14:13:17
【问题描述】：

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 中的 fontawesome 图标。我使用的是免费版。

我收到此错误：

编译失败。

./src/App.js 尝试导入错误：“faGithub”未从 '@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

另一个快速的问题，字体真棒甚至存在于文件树中的什么位置？我到处都找不到。

【问题讨论】：

标签： reactjs font-awesome-5

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

【讨论】：

非常感谢您的回答！我终于自己解决了它，像这样导入它：import { FaGithub, FaReddit, FaBitcoin, FaSync } from 'react-icons/fa';
@ekr990011 实际上我直到现在才知道这个包的存在！感谢分享，我一定会看看它，因为它看起来更像是一个包含大量图标的集合，包括 FontAwesome，这对开发肯定会更好。
非常感谢 React Icons 库的推荐，截至 2020 年，我发现这个 react font awesome 包很难使用，感谢你的推荐，react 图标库非常简单，更易于使用并且有更多的图标，希望能反应字体真棒改进他们的包，因为当前的图标很痛苦.....

【解决方案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

【讨论】：