React

Font Awesome 现在有一个官方的 React 组件，可以以一种无摩擦的方式在您的 React 应用程序中使用我们的图标。

#开始之前确保你：

• 想使用 React 而不是 React Native（这是一个不同的 react-native-fontawesome 组件）。
• 可以在项目中使用 SVG + JS 来呈现图标——这个 React 组件依赖于该技术
• 下载 Font Awesome v5 特定于 Web 的文件并将它们放在手边。
• 如果您计划使用 Pro-only 图标，请设置一个项目以使用 Pro 包。

#开始

要开始，您需要使用 npm 和 yarn 等包管理器将以下包安装到您的项目中。 以下是安装您需要的一切的示例，以及我们使用每个相应包管理器的可靠图标样式。

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

请参阅此 Stack Overflow 问题，了解 和 之间的区别。 Yarn 还允许您使用保存为开发依赖项。--save--save-dev--dev

#添加其他样式

如果您想使用其他样式的图标，您还需要安装它们。 下面是一个示例，说明如何通过 npm 添加我们的品牌图标和免费的常规样式图标集。

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-duotone-svg-icons

yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-duotone-svg-icons

为了使用 Pro 图标，您需要将要使用的图标类型传递到组件的属性中。 继续阅读以获取有关使用的更详细说明：图标

  // Light:
  <FontAwesomeIcon icon={["fal", "coffee"]} />
  // Regular:
  <FontAwesomeIcon icon={["far", "coffee"]} />
  // Solid
  <FontAwesomeIcon icon={["fas", "coffee"]} />
  // ...or, omit as FontAwesome defaults to solid, so no need to prefix:
  <FontAwesomeIcon icon="coffee" />
  // Brand:
  <FontAwesomeIcon icon={["fab", "github"]} />