欢迎 Web Awesome，最大的开源 web 组件库。

图标库

Font Awesome 提供数千个图标。“库”是您可以对文件大小进行子集或减少，并轻松引用图标的方式。

Font Awesome SVG 核心和图标内容包

该 @fortawesome/fontawesome-svg-core 包提供了功能，但没有提供任何图标内容。

npm install @fortawesome/fontawesome-svg-core

我们将使用 library 对象，它是 API 的一部分。安装一个图标内容包，让我们开始吧。

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

# Pro icons styles
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

# Free icons styles
npm install @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

将图标添加到库中

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

library.add(...all)

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { fal } from '@fortawesome/pro-light-svg-icons'
import { fat } from '@fortawesome/pro-thin-svg-icons'
import { fad } from '@fortawesome/pro-duotone-svg-icons'
import { fass } from '@fortawesome/sharp-solid-svg-icons'
import { fasr } from '@fortawesome/sharp-regular-svg-icons'
import { fasl } from '@fortawesome/sharp-light-svg-icons'
import { fast } from '@fortawesome/sharp-thin-svg-icons'

library.add(fas, far, fal, fat, fad, fass, fasr, fasl, fast)

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab)

该 { library } 导入有一个 add() 方法，它接受任意数量的参数，并注册图标以供以后使用。

使用库

有了库中的图标，我们可以使用 findIconDefinition() 方法使用样式前缀和图标名称来定位图标对象。

import { findIconDefinition } from '@fortawesome/fontawesome-svg-core'

const glasses = findIconDefinition({ prefix: 'fas', iconName: 'glasses' })

这里发生了什么？该 findIconDefinition() 方法正在使用 library 来定位与 prefix 和 iconName 匹配的图标。

该 glasses 对象包含有关图标的所有信息 - 大小、前缀、名称和 SVG 路径数据。这被称为图标定义。

{
  "prefix": "fas",
  "iconName": "glasses",
  "icon": [
    576,
    512,
    [],
    "f530",
    "M574.1 280.37L528.75 98.66c-5.91-23.7-21.59-44.05-43-55.81-21.44-11.73-46.97-14.11-70.19-6.33l-15.25 5.08c-8.39 2.79-12.92 11.86-10.12 20.24l5.06 15.18c2.79 8.38 11.85 12.91 20.23 10.12l13.18-4.39c10.87-3.62 23-3.57 33.16 1.73 10.29 5.37 17.57 14.56 20.37 25.82l38.46 153.82c-22.19-6.81-49.79-12.46-81.2-12.46-34.77 0-73.98 7.02-114.85 26.74h-73.18c-40.87-19.74-80.08-26.75-114.86-26.75-31.42 0-59.02 5.65-81.21 12.46l38.46-153.83c2.79-11.25 10.09-20.45 20.38-25.81 10.16-5.3 22.28-5.35 33.15-1.73l13.17 4.39c8.38 2.79 17.44-1.74 20.23-10.12l5.06-15.18c2.8-8.38-1.73-17.45-10.12-20.24l-15.25-5.08c-23.22-7.78-48.75-5.41-70.19 6.33-21.41 11.77-37.09 32.11-43 55.8L1.9 280.37A64.218 64.218 0 0 0 0 295.86v70.25C0 429.01 51.58 480 115.2 480h37.12c60.28 0 110.37-45.94 114.88-105.37l2.93-38.63h35.75l2.93 38.63C313.31 434.06 363.4 480 423.68 480h37.12c63.62 0 115.2-50.99 115.2-113.88v-70.25c0-5.23-.64-10.43-1.9-15.5zm-370.72 89.42c-1.97 25.91-24.4 46.21-51.06 46.21H115.2C86.97 416 64 393.62 64 366.11v-37.54c18.12-6.49 43.42-12.92 72.58-12.92 23.86 0 47.26 4.33 69.93 12.92l-3.13 41.22zM512 366.12c0 27.51-22.97 49.88-51.2 49.88h-37.12c-26.67 0-49.1-20.3-51.06-46.21l-3.13-41.22c22.67-8.59 46.08-12.92 69.95-12.92 29.12 0 54.43 6.44 72.55 12.93v37.54z"
  ]
}

最实用的 API 方法之一是使用图标定义 icon()。它可以将图标定义转换为适合在 DOM 或其他地方使用的 SVG 表示形式。

import { findIconDefinition, icon } from '@fortawesome/fontawesome-svg-core'

const glasses = findIconDefinition({ prefix: 'fas', iconName: 'glasses' })
const i = icon(glasses)

// Loop through each node and appending it to the DOM body
Array.from(i.node).map((n) => document.body.appendChild(n))

子集

虽然将整个样式添加到库中很容易，但这会导致一些大型文件。一个典型的网站，即使是使用大量图标的网站，也只需要 Font Awesome 提供的数千个图标中的一小部分。

这就是子集的用处。

让我们以之前的示例为例，只导入我们需要的图标。

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCamera } from '@fortawesome/free-solid-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'

library.add(faCamera, faTwitter)

您可以通过捆绑工具（消除“死代码”）来利用这种显式导入的优势。死代码是指最终捆绑包中永远不会被项目使用的任何内容（因此可以安全地将其删除）。此过程称为树状摇晃。Rollup 和 Webpack 2+ 是支持树状摇晃的几个工具。