以下是将 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适配器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使用“库”方法，那么在您的react代码中应该看起来像这样：

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

   如果你喜欢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
   

您必须使用 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 #installing-pro
3. 安装 react-fontawesome并按照示例渲染图标：https : //github.com/FortAwesome/react-fontawesome

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

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

我今天遇到了这个问题，我认为如何使用Pro版本图标的主要问题还没有解决。官方文档没有太大帮助。这就是我使用faFilePlusicon 时必须做的事情，light 版本：

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 进行身份验证，如其中一个答案中所述。

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

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