reactjs - 如何将 FontAwesome 5 Pro 与 React 集成？

Question

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

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

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

Answer 1

以下是如何将 Font Awesome 5 Pro 与 React (2018) 集成：

1. 从Font Awesome 的定价页面购买 Pro 许可证
2. 成功后，忽略成功页面。您应该登录到 Font Awesome。在登录状态下，进入本指南：Font Awesome 安装指南。
3. 如果您已登录并在您的帐户中拥有有效的许可证密钥，则本教程中的每个代码片段都将使用您的访问令牌。
4. 现在，您可以通过 (A) 全局安装许可证密钥，也可以npm config set ...通过 (B) 在每个项目本地安装许可证密钥.npmrc。我推荐（B），这样其他队友也可以安装 pro 包。

5. 对于 (B)，转到您的 package.json 目录并创建一个.npmrc文件。在该文件中，粘贴指南中提供的代码片段。它应该看起来像这样：

   // .npmrc
   @fortawesome:registry=https://npm.fontawesome.com/
   //npm.fontawesome.com/:_authToken=<MY_AUTH_TOKEN_FROM_FONT_AWESOME>
   

6. 完成后，您现在应该可以安装 pro 软件包了。它们是根据官方反应适配器react-fontawesome提供的，可作为以下 npm 包使用：

   • @fortawesome/pro-solid-svg-icons
   • @fortawesome/pro-regular-svg-icons
   • @fortawesome/pro-light-svg-icons
7. 所以现在npm install @fortawesome/pro-<MY_ICON_WEIGHT>-svg-icons安装您选择的专业包。

8. 此后，继续使用 react-fontawesome 包提供的功能。如果您安装了轻量版并使用react-fontawesome的“库”方法，那么在您的反应代码中应该看起来像这样：

   // app.js
   import { library, config } from '@fortawesome/fontawesome-svg-core'
   import { fal } from '@fortawesome/pro-light-svg-icons'
   
   library.add(fal)
   

9. 最后，在组件文件中的用法看起来像这样（在 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
   

Answer 2

您必须使用 TOKEN 通过 NPM 访问 Font Awesome Pro。

手动下载图标并在本地安装它们是一种反模式，而不是 Font Awesome 团队希望您将 Font Awesome Pro 与 Node 和 NPM 一起使用的方式。

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

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

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

Answer 3

tldr; 使用@fortawesome/pro-light-svg-icons, @fortawesome/pro-regular-svg-iconsNPM 包。

我今天遇到了这个问题，我认为如何使用专业版图标的主要问题尚未解决。官方文档没有太大帮助。这是我使用faFilePlus图标时必须做的，轻量版：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faFilePlus } from '@fortawesome/pro-light-svg-icons/faFilePlus';

接着：

<FontAwesomeIcon icon={faFilePlus} />

注意使用@fortawesome/pro-light-svg-iconsNPM 包。这在 FA 的官方文档中的任何地方都没有记录，我不得不通过几个地方来挖掘这个解决方案。官方文档只讨论了“免费”图标的使用，但没有说明在哪里可以找到与 light、regular 等等效的 NPM 包。

另请注意，这确实需要对 NPM 进行身份验证，如答案之一所述。

Answer 4

好的，我自己解决了。我所做的是导入@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 5

我认为您将能够使用它们将 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 6

我设法让它工作而不必导入每个图标，

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