如何将FontAwesome 5 Pro与React集成？

Question

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

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

当我登录FontAwesome网站时，可以下载pro-version JS，但是我猜这在React中没有用。

Answer 1

这是将Font Awesome 5 Pro与React（2018）集成的方法：

1. 从Font Awesome的定价页面购买专业版许可证
2. 成功后，忽略成功页面。您应该登录到Font Awesome。在登录状态下，转至本指南：Font Awesome Installation Guide。
3. 如果您已登录并且帐户中具有有效的许可证密钥，那么本教程中的每个代码段都将使用您的访问令牌。
4. 现在，您可以通过（A）npm config set ...在全局安装许可证密钥，或者通过（B）在每个项目本地安装许可证密钥.npmrc。我建议（B），以便其他队友也可以安装专业版软件包。

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

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

6. 完成后，您现在应该能够安装专业版软件包。它们是根据官方的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要安装您选择的pro软件包。

8. 之后，继续使用react-fontawesome软件包提供的用法。如果您安装了简明版本并通过react-fontawesome使用'Library'方法，那么在您的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
   

   如果您喜欢打字稿：

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

太棒了；使用@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} />

注意NPM包的使用@fortawesome/pro-light-svg-icons。这在 FA 官方文档中没有任何记录，我必须深入研究几个地方才能找到这个解决方案。官方文档只讨论了“免费”图标的使用，但没有说明在哪里可以找到 light、regular 等的等效 NPM 包。

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