有人可以建议我如何将 FontAwesome 5 Pro 与 React 集成吗？
我知道有 @fortawesome/react-fontawesome 包，例如 @fortawesome/fontawesome-free-regular，但有没有办法包含 专业版 图标？
当我登录 FontAwesome 网站时，我可以下载专业版的 JS，但我想这在 React 中没有用。
【问题讨论】：
标签： reactjs font-awesome font-awesome-5
以下是如何将 Font Awesome 5 Pro 与 React (2018) 集成：
npm config set ... 全局安装许可证密钥，或通过 (B) .npmrc 在每个项目本地安装许可证密钥。我推荐 (B)，这样其他队友也可以安装 pro 包。对于 (B)，转到您的 package.json 目录并创建一个 .npmrc 文件。在该文件中，粘贴指南中提供的代码 sn-p。它应该看起来像这样：
// .npmrc
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=<MY_AUTH_TOKEN_FROM_FONT_AWESOME>
完成后，您现在应该可以安装 pro 软件包了。它们是根据官方的 react 适配器 react-fontawesome 提供的，可作为以下 npm 包使用：
npm install @fortawesome/pro-<MY_ICON_WEIGHT>-svg-icons 安装您选择的专业包。此后，继续使用 react-fontawesome 软件包提供的功能。如果您安装了轻量版并使用'Library' method by react-fontawesome，那么在您的反应代码中应该看起来像这样：
// app.js
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { fal } from '@fortawesome/pro-light-svg-icons'
library.add(fal)
最后，在组件文件中的用法看起来像这样（在 JS 和 TS 风格中都可用）：
// Foo.jsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Foo = () => {
return (
<FontAwesomeIcon icon={['fal', 'utensils']} />
)
}
export default Foo
如果你喜欢 Typescript：
// Foo.tsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { IconLookup } from '@fortawesome/fontawesome-svg-core'
const Foo = () => {
const icon: IconLookup = { prefix: 'fal', iconName: 'utensils' }
return (
<FontAwesomeIcon icon={icon} />
)
}
export default Foo
【讨论】：
library.add() 调用，你可以使用具体图标直接在 FontAwesomeIcon 组件中。 （节省一些千字节）
手动下载图标并在本地安装它们是一种反模式，而不是 Font Awesome 团队希望您将 Font Awesome Pro 与 Node 和 NPM 一起使用的方式。
访问 Pro 包需要您使用您的 TOKEN 配置 @fortawesome 范围以使用 Font Awesome Pro NPM 注册表，该令牌可以在您的 Font Awesome 帐户设置中找到。
注意：如果您希望在 React Native 中使用 Font Awesome Pro，请查看：react-native-fontawesome-pro
【讨论】：
tldr; 使用@fortawesome/pro-light-svg-icons、@fortawesome/pro-regular-svg-icons NPM 包。
我今天遇到了这个问题，我认为如何使用专业版图标的主要问题尚未解决。官方文档没有太大帮助。这就是我使用 faFilePlus 图标时必须做的事情，精简版：
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFilePlus } from '@fortawesome/pro-light-svg-icons/faFilePlus';
然后：
<FontAwesomeIcon icon={faFilePlus} />
注意使用@fortawesome/pro-light-svg-icons NPM 包。这在 FA 的官方文档中的任何地方都没有记录，我不得不通过几个地方来挖掘这个解决方案。官方文档只讨论了“免费”图标的使用，但没有说明在哪里可以找到与 light、regular 等等效的 NPM 包。
另请注意，这确实需要对 NPM 进行身份验证，如答案之一所述。
【讨论】：
好的，我自己解决了。我所做的是导入@fortawesome/react-fontawesome。然后我手动下载了 FontAwesome 的 pro 包，并从文件夹 /advanced-options/use-with-node-js/fontawesome-pro-light 复制了所需的图标（有 faUsers.js 等 JS 文件）到我的项目文件夹，并包含这些图标。
所以在文件的开头我有类似的东西
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import faUser from '../font-awesome/faUser';
然后我用了它
render() {
return() (
...
<FontAwesomeIcon icon={faUser} />
...
);
}
这有点烦人，因为我需要手动导入每个图标，但我想不出更好的解决方案。
【讨论】：
我认为您将能够使用它们将 JS 脚本和适当的 CSS 文件添加到您的 index.html
假设你想在不安装任何软件包的情况下使用默认字体 awesome，那么直接在 index.html 中包含文件，如下所示
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>【讨论】：
import 指令以某种方式将它包含到JS中。
我设法让它工作，而不必导入每个图标，
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import fontawesome from '@fortawesome/fontawesome'
import solid from '@fortawesome/fontawesome-pro-solid'
fontawesome.library.add(solid)
然后使用图标作为
<FontAwesomeIcon icon={solid.faPlusHexagon}/>
【讨论】：