使用 React 设置

使用 Font Awesome 与 React 时，我们建议使用我们的官方 react-fontawesome 组件，以确保一切正常工作。

开始之前

确保您

• 配置了访问权限以使用 Font Awesome 包
• 计划 使用 SVG+JS 方法
• 正在使用 React 而不是 React Native（这是 不同的组件）

我们将介绍使用官方 react-fontawesome 组件（如下所述）的基础知识，该组件使用 SVG + JS 方法呈现图标。但如果您愿意，也可以选择使用 Web 字体 + CSS 方法。

按照以下步骤在您的项目中设置 react-fontawesome 组件。

npm、yarn 和 pnpm

在我们的示例中，我们将使用 npm i 来表示包安装，以简化操作。如果您使用的是 yarn 或 pnpm，我们会假设您知道这些管理器的正确命令。

1. 添加 SVG 内核

首先，您需要使用 npm 或 yarn 来 **安装核心包**，其中包含使图标正常工作的所有实用程序

npm i --save @fortawesome/fontawesome-svg-core

详细了解 Font Awesome 核心包的内容

2. 添加图标包

接下来，您将 **安装** 要使用的图标 - 您可以选择工具包包或 SVG 图标包，并选择任何 我们的样式。

对于 Pro 图标，您首先需要使用您的秘密 Font Awesome npm 令牌和全局或每个项目的访问权限来设置访问权限。

配置 Pro 的访问权限

然后添加您计划在应用程序中使用的 Pro 图标样式包

工具包包

npm i --save @awesome.me/kit-KIT_CODE

Pro SVG 图标包

# You probably don't need all of these, just pick what you need
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
npm i --save @fortawesome/sharp-regular-svg-icons
npm i --save @fortawesome/sharp-light-svg-icons
npm i --save @fortawesome/sharp-thin-svg-icons

免费 SVG 图标包

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

3. 添加 React 组件

最后，**安装 Font Awesome React 组件**

npm i --save @fortawesome/react-fontawesome@latest

您已准备好添加图标！

正如 Anakin 所说，它正在工作！我们所有的 图标 现在都已准备就绪，可以按您的项目的要求执行。 了解如何将它们添加到您的 React 项目中，然后利用它们的力量为您的 UI 带来秩序和风格！

添加一些图标！