跳到内容
Font Awesome 文档
Web Awesome 隆重登场，这是规模最大、功能最强大的开源 Web 组件库。
立即预订！

使用 React 添加图标

在 React 项目中添加图标的方法有很多。选择适合您项目的选项，然后使用 FontAwesomeIcon 元素在您的 UI 中添加图标。

使用 React 添加图标的方法有很多。最简单的方法是使用 Pro Kit

，它支持自定义图标上传和图标子集。但是您也可以选择其他方法，使用来自我们的 SVG 图标包的图标。

使用套件包

如果您已创建并安装了套件，则可以开始使用了。

按前缀和名称

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { byPrefixAndName } from '@awesome.me/kit-KIT_CODE/icons'


const element = <FontAwesomeIcon icon={byPrefixAndName.fas['house']} />


ReactDOM.render(element, document.body)

要使此方法正常工作，您需要拥有一个包含示例中图标的套件。如果您不熟悉套件的工作原理，可以在这里了解。

导入特定图标

除了使用前缀和名称，还可以直接导入图标。如果您需要摇树优化，这是最佳选择。

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'


const element = <FontAwesomeIcon icon={faHouse} />


ReactDOM.render(element, document.body)
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faMyIcon } from '@awesome.me/kit-KIT_CODE/icons/kit/custom'
const element = <FontAwesomeIcon icon={faMyIcon} />
ReactDOM.render(element, document.body)

您也可以使用整个字体系列和样式中的所有图标。但这将导致摇树优化失效（也许吧？我们现在使用 AI 了吗？）。

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { fas, far, fal } from '@awesome.me/kit-KIT_CODE/icons'


const element = (
  <div>
    <FontAwesomeIcon icon={fas.faHouse} />
    <FontAwesomeIcon icon={far.faMouse} />
    <FontAwesomeIcon icon={fal.faCheese} />
  </div>
)


ReactDOM.render(element, document.body)
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { fak } from '@awesome.me/kit-KIT_CODE/icons'
const element = (
  <div>
    <FontAwesomeIcon icon={fak.faMyIcon} />
    <FontAwesomeIcon icon={fak.faAnotherOne} />
    <FontAwesomeIcon icon={fak.faMyLogo} />
  </div>
)
ReactDOM.render(element, document.body)

使用库

SVG 核心 提供的另一种机制是名为 Library 的 JavaScript 类。

对于子集套件，这是一种简单的方法，可以一次性添加所有图标，并使用语法更少的语法。

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/kit-KIT_CODE/icons'


library.add(...all)

现在，套件中的所有图标都已在一行代码中添加。无需费心，轻松搞定。

使用该库不需要导入图标。您只需要一个数组或字符串即可。

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'


const element = <FontAwesomeIcon icon="fa-solid fa-house" />


ReactDOM.render(element, document.body)

自定义图标也很容易添加。

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'


const element = <FontAwesomeIcon icon={['fak', 'my-icon']} />


ReactDOM.render(element, document.body)
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'


const element = <FontAwesomeIcon icon="fa-kit fa-my-icon" />


ReactDOM.render(element, document.body)

Typescript 和自定义图标 问题

目前，使用自定义图标与 Typescript 存在一些问题。我们将在 Font Awesome 的未来版本中解决这些问题，但目前，我们提供了一些变通方法。

使用数组的库

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome/kit-KIT_CODE/icons'


library.add(...all)


const element = <FontAwesomeIcon icon="{['kit', 'my-icon']}" />
// This will cause this Typescript error: `Type is not assignable to type IconProp`


ReactDOM.render(element, document.body)

使用字符串的库

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome/kit-KIT_CODE/icons'
library.add(...all)
const element = <FontAwesomeIcon icon="fa-kit fa-my-icon" />
// This will cause this Typescript error: `Type is not assignable to type IconProp`
ReactDOM.render(element, document.body)

我们知道这很麻烦，而且违背了使用 Typescript 的目的。我们正在努力解决这个问题，但我们认为我们需要使用泛型 来解决它，我们不想拖延套件包的首次发布。

添加一些样式

现在您已经将一些图标添加到页面，可以添加一些装饰了！查看所有可以使用 Font Awesome 和 React 的样式选项。

尽情展现您的个性，添加一些样式！

从 SVG 图标包导入

如果您无法或不想使用套件，可以显式地将单个图标添加到每个组件中。以下是一个简单的示例

显式添加单个图标

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'


const element = <FontAwesomeIcon icon={faEnvelope} />


ReactDOM.render(element, document.body)

请注意，faEnvelope 图标是从 @fortawesome/free-solid-svg-icons 中作为对象导入的，然后作为对象提供给 icon 属性。

全局添加图标

我们喜欢轻装上阵，因此不建议使用这种方法，除非您知道自己在做什么。全局导入图标会导致捆绑包中包含您没有使用的图标，从而增加捆绑包的大小。它还会将您的组件与另一个管理图标的模块耦合。

首先，您需要通过 React 应用程序的初始化模块（例如 App.js）中的“库”导入要使用的图标。以下是一个示例

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons'
import { faHatCowboy } from '@fortawesome/pro-thin-svg-icons'
import { faHatChef } from '@fortawesome/sharp-solid-svg-icons'
import { faPlateUtensils } from '@fortawesome/sharp-regular-svg-icons'


library.add(fas, faTwitter, faFontAwesome, faHatCowboy, faHatChef, faPlateUtensils)

在对 library.add() 的调用中，我们传递的是

  • fas：代表 @fortawesome/free-solid-svg-icons 中的所有图标。（小心导入整个样式，因为它可能包含大量的图标！）因此，该包中的任何图标都可以在应用程序中的任何其他地方按图标名称（字符串）引用。例如：coffee、check-square 或 spinner。
  • faTwitter、faFontAwesome、faHatCowboy、faHatChef 和 faPlateUtensils：分别添加这些图标，使我们能够在整个应用程序中通过它们的图标字符串名称引用它们，例如：twitter、font-awesome、hat-cowboy、hat-chef 和 plate-utensils。

然后，您可以在应用程序中的任何地方使用这些图标，无需在每个组件中重新导入它们。因此，如果您在几个组件中使用了图标，最终看起来像这样

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'


export const Mailroom = () => (


  <div>
    <FontAwesomeIcon icon="fa-solid fa-check-square" />
    Your <FontAwesomeIcon icon="fa-regular fa-coffee" /> is hot!


    Compliments of the <FontAwesomeIcon icon="fa-sharp fa-solid fa-hat-chef" />!


  </div>
)
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'


export const Showcase = () => (


  <div>
    <FontAwesomeIcon icon="fa-brands fa-twitter" />
    <FontAwesomeIcon icon="fa-brands fa-font-awesome" />


    <FontAwesomeIcon icon="fa-regular fa-mug-hot" />
    The coffee is ready at these companies!


    Be careful not to spill any your <FontAwesomeIcon icon="fa-thin fa-hat-cowboy" />!


  </div>
)

您会注意到，我们可以使用导入的品牌图标，而无需在组件中显式导入它们。我们还使用了 square-check 和 envelope 图标，而无需在任何地方显式导入它们。但是，我们的捆绑包现在包含了超过 1000 个实心图标，以及我们添加的两个品牌图标，这比我们实际使用的图标要多，这是避免导入整个样式 的一个好理由。

相同的图标，不同的样式

使用 ES 模块和 import 语句，我们可以为两种不同样式的相同图标定义唯一的名称。以下是一个示例

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasFaCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as farFaCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falFaCoffee } from '@fortawesome/pro-light-svg-icons'
import { faCoffee as fatFaCoffee } from '@fortawesome/pro-thin-svg-icons'
import { faCoffee as fadFaCoffee } from '@fortawesome/pro-duotone-svg-icons'
import { faCoffee as fassFaCoffee } from '@fortawesome/sharp-solid-svg-icons'
import { faCoffee as fasrFaCoffee } from '@fortawesome/sharp-regular-svg-icons'
import { faCoffee as faslFaCoffee } from '@fortawesome/sharp-light-svg-icons'
import { faCoffee as fastFaCoffee } from '@fortawesome/sharp-thin-svg-icons'


library.add(fasFaCoffee, farFaCoffee, falFaCoffee, fatFaCoffee, fadFaCoffee, fassFaCoffee, fasrFaCoffee, faslFaCoffee, fastFaCoffee)

动态导入怎么办 已弃用

安装 Babel 宏

首先，您需要使用 npm 或 yarn 安装 babel 宏

终端窗口
npm install babel-plugin-macros

设置 Babel 配置

接下来，您需要配置 babel 插件。将以下内容添加到您的 babel.config.js 文件中

module.exports = function (api) {
  return {
    plugins: ['macros'],
  }
}

然后，创建一个 babel-plugin-macros.config.js 文件并添加 fontawesome-svg-core 设置。您可以将许可证设置为 free 或 pro，具体取决于您计划使用的图标。（了解有关设置 babel 宏的更多信息）

module.exports = {
  'fontawesome-svg-core': {
    'license': 'free'
  }
}
module.exports = {
  'fontawesome-svg-core': {
    'license': 'pro'
  }
}

将图标添加到您的项目

在您希望它们出现在项目中的任何地方使用以下语法。

import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'


// Specify all properties: name, family, style
icon({name: 'user', family: 'classic', style: 'solid'})
icon({name: 'user', family: 'classic', style: 'regular'})
icon({name: 'twitter', family: 'classic', style: 'brands'})


// 'classic' is the default family, you can leave that off
icon({name: 'user', style: 'solid'})
icon({name: 'user', style: 'regular'})
icon({name: 'twitter', style: 'brands'})


// 'solid' is the default style, you can leave that off
icon({name: 'user'})
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
// Specify all properties: name, family, style
icon({name: 'user', family: 'classic', style: 'solid'})
icon({name: 'user', family: 'classic', style: 'regular'})
icon({name: 'user', family: 'classic', style: 'light'})
icon({name: 'user', family: 'classic', style: 'thin'})
icon({name: 'user', family: 'duotone', style: 'solid'})
icon({name: 'user', family: 'sharp', style: 'solid'})
icon({name: 'user', family: 'sharp', style: 'regular'})
icon({name: 'user', family: 'sharp', style: 'light'})
icon({name: 'user', family: 'sharp', style: 'thin'})
icon({name: 'twitter', family: 'classic', style: 'brands'})
// 'classic' is the default family, you can leave that off
icon({name: 'user', style: 'solid'})
icon({name: 'user', style: 'regular'})
icon({name: 'user', style: 'light'})
icon({name: 'user', style: 'thin'})
// 'solid' is the default style, you can leave that off
icon({name: 'user'})

在上下文中查看更有意义。

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'


<FontAwesomeIcon icon={icon({name: 'user-secret'})} /> // Defaults to the Classic family, Solid style
<FontAwesomeIcon icon={icon({name: 'coffee', style: 'regular'})} /> // Defaults to Classic family
<FontAwesomeIcon icon={icon({name: 'coffee', family: 'sharp', style: 'solid'})} /> // Setting both family and style
<FontAwesomeIcon icon={icon({name: 'twitter', style: 'brands'})} /> // A brand icon
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { solid, regular, light, thin, duotone, icon } from '@fortawesome/fontawesome-svg-core/import.macro' // <-- import styles to be used
<FontAwesomeIcon icon={icon({name: 'user-secret'})} /> // Defaults to the Classic family, Solid style
<FontAwesomeIcon icon={icon({name: 'coffee', style: 'regular'})} /> // Defaults to Classic family
<FontAwesomeIcon icon={icon({name: 'coffee', family: 'classic', style: 'light'})} /> // Setting both family and style
<FontAwesomeIcon icon={icon({name: 'coffee', family: 'classic', style: 'thin'})} /> // Thin
<FontAwesomeIcon icon={icon({name: 'coffee', family: 'duotone', style: 'solid'})} /> // Duotone
<FontAwesomeIcon icon={icon({name: 'user-secret', family: 'sharp', style: 'solid'})} /> // Sharp Solid
<FontAwesomeIcon icon={icon({name: 'plate-utensils', family: 'sharp', style: 'regular'})} /> // Sharp Regular
<FontAwesomeIcon icon={icon({name: 'starship', family: 'sharp', style: 'light'})} /> // Sharp Light
<FontAwesomeIcon icon={icon({name: 'twitter', style: 'brands'})} /> // A brand icon

较旧的导入宏 solid()、regular()、light()、thin()、duotone() 和 brands() 仍然支持，以确保向后兼容。但我们建议您切换到较新的 icon() 函数