欢迎使用 Web Awesome，这是最大的、最好的开源 Web 组件库。

套件包 API

Font Awesome 套件现在可以使用与 npm 兼容的包管理器安装。了解其中包含的内容以及如何在 JavaScript 和其他应用程序中使用该包。

包中包含的内容

资产	位置	用途
CSS	css/*	使用 `webfonts` 目录中的文件在任何现代浏览器中使用的样式表
Less	less/*	使用 `webfonts` 目录的 Less 文件
SCSS	scss/*	使用 `webfonts` 目录的 SCSS（Sass）文件
Web 字体文件	webfonts/*	用于 CSS、Less 和 SCSS 的 WOFF2 和 TTF Web 字体文件
自动加载 JavaScript	js/*	更易于使用的 JavaScript 文件，用于直接在浏览器中使用 `<script>` 标签包含，使用 SVG + JS 技术
ESM & CommonJS JavaScript	modules/*	与 SVG 核心兼容的 JavaScript 文件，适合与构建工具、JS 框架或 `<script type="module">` 一起使用，使用 SVG + JS 技术
SVG 雪碧图	sprites/*	所有图标的 SVG 雪碧图
SVG 文件	svg/*	所有图标的单个 SVG 文件
数据文件	metadata/*	包含图标数据的 JSON 和 Yaml 文件

使用 JavaScript API

现代世界中的现代包

套件包使用更新的 exports 功能package.json 配置. 大多数较新的构建工具和系统都了解这一点，但较旧的工具可能难以找到您尝试导入的模块。

`byPrefixAndName[prefix][iconName]`

此对象包含套件中的所有图标。如果您已 对套件进行了子集化，这将易于理解和使用。

将 KIT_CODE 替换为您的 Pro 套件唯一令牌

如果您已将 “房子图标” 添加到您的套件，您可以执行以下操作。

import { byPrefixAndName } from '@awesome.me/kit-KIT_CODE/icons'

byPrefixAndName.fas['house']

来自 byPrefixAndName 的对象按前缀组织，然后是图标名称。

byPrefixAndName.fas['house']
byPrefixAndName.far['square']
byPrefixAndName.fass['sword']
byPrefixAndName.fab['font-awesome']

带有单个图标对象的形状像这样。

// Example icon returned
{
  prefix: 'fas',
  iconName: 'house',
  icon: [
    576,
    512,
    [63498,63500,127968,"home","home-alt","home-lg-alt"],
    'f015',
    'M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'
  ]
};

前缀

前缀 fas 是以下之一。

套件自定义系列

样式	可用性	前缀	看起来像
套件	Pro 计划	`fak`	您上传的任何图标
套件双色调	即将推出！	`fakd`

经典系列

样式	可用性	前缀
实心	免费计划	`fas`
常规	仅限 Pro	`far`
亮色	仅限 Pro	`fal`
细线	仅限 Pro	`fat`
品牌	免费计划	`fab`

双色调系列

样式	可用性	前缀	看起来像
实心	仅限 Pro	`fad`

锐利系列

样式	可用性	前缀
实心	仅限 Pro	`fass`
常规	仅限 Pro	`fasr`
亮色	仅限 Pro	`fasl`
细线	仅限 Pro	`fast`
双色调	即将推出！

`all[]`

All 是套件中每个图标的数组。如果您正在使用的套件正在使用自定义子集化，那么这是最佳选择。

import { all } from '@awesome.me/kit-KIT_CODE/icons'

使用 all 的最有效方法是将其与 SVG 核心库配对。该库允许您注册要使用的图标，并通过其他 API 和库以各种方式查找这些图标。

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

library.add(...all)

all 数组中的单个图标与从 byPrefixAndName 返回的对象相同。

图标包

使用 all 的下一步是按系列和样式导入图标。

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas, fad, fasr, fak } from '@awesome.me/kit-KIT_CODE/icons'
library.add(fas, fad, fal)

图标包是根据图标名称键入的对象。但图标名称以 fa 为前缀并使用驼峰式命名。因此 square-check 变为 faSquareCheck。由于 JavaScript 中的变量名称不能以数字开头，因此您会看到所有内容都以 fa 开头。

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

library.add(fas.faSquareCheck)

导入

套件自定义系列

样式	导入
套件	`import { fak } from '@awesome.me/kit-KIT_CODE/icons'`
套件双色调	尚不可用，但即将推出！

经典系列

样式	导入
实心	`import { fas } from '@awesome.me/kit-KIT_CODE/icons'`
常规	`import { far } from '@awesome.me/kit-KIT_CODE/icons'`
亮色	`import { fal } from '@awesome.me/kit-KIT_CODE/icons'`
细线	`import { fat } from '@awesome.me/kit-KIT_CODE/icons'`
品牌	`import { fab } from '@awesome.me/kit-KIT_CODE/icons'`

双色调系列

样式	导入
实心	`import { fad } from '@awesome.me/kit-KIT_CODE/icons'`

锐利系列

样式	导入
实心	`import { fass } from '@awesome.me/kit-KIT_CODE/icons'`
常规	`import { fasr } from '@awesome.me/kit-KIT_CODE/icons'`
亮色	`import { fasl } from '@awesome.me/kit-KIT_CODE/icons'`
细线	`import { fast } from '@awesome.me/kit-KIT_CODE/icons'`
双色调	即将推出！

摇动那些树木

使用 all 和图标包使得构建工具难以利用树状抖动。因此，如果您知道要使用此功能，请尝试使用下面的“单个图标”导入示例。但是，您可以通过使用自定义子集化的套件来实现与树状抖动相同的效果。自定义子集化允许您仅选择实际将要使用的系列、样式和图标。这与树状抖动解决的目标相同，但以更不注重技术的方式实现。

单个图标

您可以导入单个图标。这样做的好处是可以进行树状抖动，从而使您的包保持较小。

import { faSquare } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
// React example
<FontAwesomeIcon icon={faSquare} />

导入

套件自定义系列

样式	导入
套件	`import { faMyIcon } from '@awesome.me/kit-KIT_CODE/icons/kit/custom'`
套件双色调	尚不可用，但即将推出！

经典系列

样式	导入
实心	`import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'`
常规	`import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/regular'`
亮色	`import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/light'`
细线	`import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/thin'`
品牌	`import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/brands'`

双色调系列

样式	导入
实心	`import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/duotone/solid'`

锐利系列

样式	导入
实心	`import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/sharp/solid'`
常规	`import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/sharp/regular'`
亮色	`import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/sharp/light'`
细线	`import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/sharp/thin'`
双色调	即将推出！

故障排除

TypeScript

如果您在使用 TypeScript 时遇到导入错误，您可能需要调整 TypeScript 配置。

由于 moduleResolution 设置错误而导致的常见错误如下。

Cannot find module '@awesome.me/kit-KIT_CODE/icons/classic/solid' or its corresponding type declarations.

要解决此问题，请进入您的 tsconfig.json 文件并确保 moduleResolution 设置为套件包支持的值。

选项
nodenext	推荐
bundler	如果 nodenext 出于某种原因对您不起作用，也支持此选项。
node16	支持，但不推荐，因为它目前与 nodenext 相同，而 nodenext 是面向未来的，并将更新以支持新增的 Node.js 模块解析功能。
~~node~~	不支持
~~classic~~	不支持
~~node10~~	不支持

"moduleResolution": "bundler",

关于不兼容的 TypeScript 默认值的说明

您的 TypeScript 实现可能会默认使用不兼容的 module 或 moduleResolution 选项。例如，截至 TypeScript 5.4.2，新项目将默认使用 module: commonjs 并且不会指定 moduleResolution。不幸的是，当 module 为“commonjs”时，默认的 moduleResolution 为“node10”，相当于“node”，这是不支持的。

有关 moduleResolution 设置的更多信息，请参阅官方 TypeScript 文档。

404 错误

如果您遇到此错误

HttpErrorGeneral: 404 Not Found - GET https://registry.npmjs.com/@awesome.me%2Fkit-KIT_CODE - Not found

尝试在运行安装命令之前运行更新命令。

npm update '@awesome.me/kit-KIT_CODE'

npm install --save '@awesome.me/kit-KIT_CODE@latest'