如何将 FontAwesome 5 Pro 与 React 集成

Question

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

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

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

Answer 1

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

1. 从Font Awesome的定价页面购买Pro许可证
成功
2. 后，忽略成功页面。您应该登录到字体真棒。在登录状态下，转到本指南：字体真棒安装指南。
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. 完成后，您现在应该能够安装专业软件包。它们根据官方的反应适配器 react-fontawesome 提供以下 npm 包：

   • @fortawesome/亲固体-svg-icons
   • @fortawesome/亲常规 svg 图标
   • @fortawesome/亲光-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

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

请注意 NPM 包的使用@fortawesome/pro-light-svg-icons。这在英足总的官方文档中没有记录，我不得不在几个地方挖掘才能找到这个解决方案。官方文档只谈论"免费"图标的使用，但没有说在哪里可以找到轻量级、常规等效的 NPM 包。

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

Answer 3

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

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

访问 Pro 软件包需要您配置@fortawesome范围以使用您的TOKEN使用字体真棒专业 NPM 注册表，该令牌可以在您的字体真棒帐户设置中找到。

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

Answer 4

好的，我自己解决了。我所做的是导入@fortawesome/react-fontawesome.然后我手动下载了 FontAwesome 的专业包，并从/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文件添加到索引中.html

假设如果您想在不安装任何软件包的情况下使用默认字体真棒，那么直接将文件包含在索引中.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}/>