Reactjs 如何将Font5 Pro与React集成？

有谁能给我一些建议，告诉我如何将FontAwesome 5Pro与React集成

我知道有@fortawesome/react fontawesome软件包，例如@fortawesome/fontawesome免费常规软件包，但有没有办法包括图标的专业版

---

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

我想你可以使用它们将JS脚本和适当的CSS文件添加到你的index.html

假设您想使用默认字体awesome而不安装任何软件包，那么直接将文件包含在index.html中，如下所示

---

好的，我自己解决了。我所做的是导入

@fortawesome/react-fontawesome

。然后我手动下载了FontAwesome的pro软件包，并从文件夹

/advanced options/use with node js/FontAwesome pro light

中复制了所需的图标（有js文件，如

fauser.js

）到我的项目文件夹中，并包括了这些图标

因此，在文件的开头，我有一些

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

然后我就用了

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

render（）{
返回（）(
...
...
);
}

---

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

我成功地使它工作，而不必导入每个图标，并且

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

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

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

登录以查看您的令牌：

登录后导航到此分步教程，它将在所有示例中包含您的令牌：

安装并按照示例渲染图标：

---

注意：如果您希望在React Native中使用Font Awesome Pro，请查看：

tldr使用

@fortawesome/pro轻型svg图标

，

@fortawesome/pro常规svg图标

NPM软件包

我今天遇到了这个问题，我想主要的问题是如何使用Pro版本的图标还没有解决。官方文件帮不了什么忙。这就是我使用

faFilePlus

图标时必须做的事情，它是轻型版本：

从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/pro-light-svg-icons/faFilePlus”导入{faFilePlus}；

然后：

注意

@fortawesome/pro light svg图标的使用

NPM包。这在英足总的官方文件中是没有记载的，我不得不在几个地方寻找解决方案。官方文件只讨论了“免费”图标的使用，但没有说明在哪里可以找到灯光、常规等的等效NPM软件包

---

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

以下是如何将Font Awesome 5 Pro与React（2018）集成在一起：

从以下地址购买Pro许可证：

成功后，忽略成功页面。您应该登录到Font Awesome。在登录状态下，转到本指南：

如果您已登录并且帐户中有有效的许可证密钥，则本教程中的每个代码段都将使用您的访问令牌

现在，您可以通过（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>

最后，组件文件中的用法类似于此（JS和TS两种版本都有）：

//Foo.jsx
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
常量Foo=（）=>{
返回(
)
}
导出默认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

//Foo.tsx
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/fontawesome svg核心”导入{IconLookup}
常量Foo=（）=>{
常量图标：IconLookup={前缀：“fal”，iconName:“器皿”}
返回(
)
}
导出默认Foo

---

我正在使用React和Webpack。我使用index.html只是为了包含React根应用程序，所以我不能使用脚本标记。我需要用

import

指令将它以某种方式包含到JS中。可能是@Tomasz的副本：是的，我见过，但这并没有真正的帮助，因为它不涉及专业（付费）版本。FontAwesome网站解释了如何在React中使用免费版本，以及如何通过包含脚本标记来使用Pro版本，但没有提到如何在React中使用Pro版本……是的，我知道你可以这样做，但它只适用于公共图标。这些公共软件包不包含pro版本包含的所有图标-例如，没有轻型版本（只有常规和固态）。这就是您一直在寻找的：手动下载软件包可能很难在将来的升级中维护等。请查看我的答案是否有帮助？谢谢这是一个相当令人筋疲力尽的答案。我缺少的部分主要是@Beau Smith提到的NPM令牌。我甚至不知道有这样的东西存在：-）关于你的回答，值得一提的是，如果你只使用FontAwesome的几个图标，你不需要使用

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