如何将 FontAwesome 5 Pro 与 React 集成？

Question

有人可以建议我如何将 FontAwesome 5 Pro 与 React 集成吗？

我知道有包@fortawesome/react-fontawesome，例如@fortawesome/fontawesome-free-regular，但是有没有办法包含专业版图标？

当我登录FontAwesome网站时，我可以下载专业版JS，但我想这在React中没有用。

Answer 1

我认为您可以使用它们将 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>

Answer 2

好的，我自己解决了。我所做的是导入 @fortawesome/react-fontawesome。然后我手动下载了 FontAwesome 的 pro 包，并从文件夹 /advanced-options/use-with-node-js/fontawesome-pro-light 复制了所需的图标（有 JS 文件，例如 faUsers.js）到我的项目文件夹，并将这些图标也包括在内。

所以在文件的开头我有类似

的内容

import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import faUser from '../font-awesome/faUser';

然后我就用了

render() {
    return() (
         ...
         <FontAwesomeIcon icon={faUser} />
         ...
    );
}

这有点烦人，因为我需要手动导入每个图标，但我想不出更好的解决方案。

Answer 3

我设法使它工作而无需导入每个图标，

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}/>

Answer 4

您必须使用令牌才能通过 NPM 访问 Font Awesome Pro。

手动下载图标并在本地安装它们 anti-pattern 而不是 Font Awesome 团队希望您将 Font Awesome Pro 与 Node 和 NPM 结合使用的方式。

访问 Pro 软件包需要您使用您的 TOKEN 配置 @fortawesome 范围以使用 Font Awesome Pro NPM 注册表，该注册表可以在您的 Font Awesome 帐户设置中找到。

登录查看您的令牌：https://fontawesome.com/account/services
登录后导航至此 step-by-step 教程，它将在所有示例中包含您的令牌：https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro
安装react-fontawesome并按照示例渲染图标：https://github.com/FortAwesome/react-fontawesome

注意：如果您想在 React Native 中使用 Font Awesome Pro，请查看：react-native-fontawesome-pro

Answer 5

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 官方文档的任何地方都没有记录，我不得不深入研究几个地方才能找到这个解决方案。官方文档只讨论 "free" 图标的使用，但没有说明在哪里可以找到适用于 light、regular 等的等效 NPM 包。

另请注意，这确实需要按照其中一个答案中所述对 NPM 进行身份验证。

Answer 6

以下是将 Font Awesome 5 Pro 与 React (2018) 集成的方法：

从 Font Awesome's pricing page
成功后，忽略成功页面。您应该登录到 Font Awesome。在登录状态下，进入本指南：Font Awesome Installation Guide.
如果您已登录并在您的帐户中拥有有效的许可证密钥，本教程中的每个代码片段都将使用您的访问令牌。
现在，您可以通过 (A) npm config set ... 全局安装您的许可证密钥，或通过 (B) .npmrc 在每个项目本地安装。我推荐（B）这样其他队友也可以安装pro包。
对于 (B)，转到您的 package.json 目录并创建一个 .npmrc 文件。在该文件中，粘贴指南中提供的代码片段。它应该看起来像这样：
```
// .npmrc
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=<MY_AUTH_TOKEN_FROM_FONT_AWESOME>
```
完成后，您现在应该可以安装专业版软件包了。它们是根据官方反应适配器 react-fontawesome 提供的，可作为以下 npm 包使用：
- @fortawesome/pro-solid-svg-icons
- @fortawesome/pro-regular-svg-icons
- @fortawesome/pro-light-svg-icons
现在 npm install @fortawesome/pro-<MY_ICON_WEIGHT>-svg-icons 安装您选择的专业版软件包。
此后，继续使用 react-fontawesome 包提供的方法。如果您安装了精简版并使用 'Library' method by react-fontawesome:
，那么在您的 React 代码中应该看起来像这样
```
// 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

如果你喜欢打字稿：

// 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

如何将 FontAwesome 5 Pro 与 React 集成？

How to integrate FontAwesome 5 Pro with React?

font-awesome

reactjs

font-awesome-5

您必须使用令牌才能通过 NPM 访问 Font Awesome Pro。