关于reactjs：如何将FontAwesome 5 Pro与React集成？

How to integrate FontAwesome 5 Pro with React?

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

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

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

相关讨论

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

从Font Awesome的定价页面购买专业版许可证

成功后，忽略成功页面。您应该登录到Font Awesome。在登录状态下，请转至本指南：《真棒字体安装指南》。

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

现在，您可以通过(A)npm config set ...全局安装许可证密钥，也可以通过(B).npmrc在每个项目本地安装许可证密钥。我建议(B)，以便其他队友也可以安装专业版软件包。

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

1
2
3

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

完成后，您现在应该能够安装专业版软件包。它们是根据官方的React适配器react-fontawesome提供的，可通过以下npm软件包获得：

@ fortawesome / pro-solid-svg-icons
@ fortawesome / pro-regular-svg-icons
@ fortawesome / pro-light-svg-icons

因此，现在执行npm install @fortawesome/pro--svg-icons来安装您选择的pro软件包。

之后，继续使用react-fontawesome软件包提供的用法。如果您安装了简装版本并通过react-fontawesome使用'Library'方法，那么在您的react代码中应该看起来像这样：

1
2
3
4
5

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

library.add(fal)

最后，用法在组件文件中看起来像这样(在JS和TS风格中均可用)：

1
2
3
4
5
6
7
8
9
10

// Foo.jsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const Foo = () => {
return (
<FontAwesomeIcon icon={['fal', 'utensils']} />
)
}

export default Foo

如果您喜欢打字稿：

1
2
3
4
5
6
7
8
9
10
11
12

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

相关讨论

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

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

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

登录以查看您的令牌：https://fontawesome.com/account/services

登录后导航到此分步教程，它将在所有示例中包含您的令牌：https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers ＃installing-pro

安装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-icons NPM软件包。

我今天遇到了这个问题，我认为有关如何使用Pro版本图标的主要问题尚未解决。官方文档并没有太大帮助。这是使用faFilePlus图标(简易版)所要做的：

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

然后：

注意使用@fortawesome/pro-light-svg-icons NPM软件包。 FA官方文档中的任何地方都没有记录这点，我不得不深入研究几个地方才能找到此解决方案。官方文档仅讨论"免费"图标的使用，但没有说明在哪里可以找到用于轻型，常规型等价的NPM软件包。

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

相关讨论

好，我自己解决了。我所做的是导入@fortawesome/react-fontawesome。然后，我手动下载了FontAwesome的专业版软件包，并从文件夹/advanced-options/use-with-node-js/fontawesome-pro-light中复制了所需的图标(有faUsers.js之类的JS文件)到我的项目文件夹中，并且还包含了这些图标。

所以在文件开头，我有类似

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

然后我用了

1
2
3
4
5
6
7

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

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

相关讨论

我设法使其工作而不必导入每个图标，

1
2
3
4

import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import fontawesome from '@fortawesome/fontawesome'
import solid from '@fortawesome/fontawesome-pro-solid'
fontawesome.library.add(solid)

然后使用图标作为

1	<FontAwesomeIcon icon={solid.faPlusHexagon}/>

相关讨论

我认为您可以通过将JS脚本和适当的CSS文件添加到index.html来使用它们。

假设如果您想使用很棒的默认字体而不安装任何软件包，则直接在index.html中包含文件，如下所示

1
2

相关讨论