前言
FontAwesome 是一套强大的图标库，其中的图标种类繁多，使用广泛。为了更加便捷地使用这些图标，FontAwesome 团队开发了 @fortawesome/fontawesome-common-types 这个 npm 包，让开发者能够在对其它 FontAwesome 图标库的依赖下，更好地使用 Fontawesome 样式和图标。
本文将介绍如何使用 @fortawesome/fontawesome-common-types。
安装
使用 npm 安装 @fortawesome/fontawesome-common-types：
npm install @fortawesome/fontawesome-common-types
使用
- 首先，在项目中引入包：
import { IconDefinition } from '@fortawesome/fontawesome-common-types';
- 接着，定义需要使用的图标，比如：
-- -------------------- ---- ------- ----- ------- -------------- - - ----- - ---- ---- --- ------- --------- ---------------------------------------------------------------------------------------------------------- ---- --------- -------------------- ------- ----------- -------------- ------------- ------- ------ --- ------ ------------ ------ ------ -- -- ------------ ------------------------ --- ------- ------- ------- ------------ ----------- --------------------------- ----- -- ------ -- ---------- --- --- ------ -- --------- ----------- ------- ------ --展开代码
- 将图标与 FontAwesome 图标库中的图标合并：
import { library } from '@fortawesome/fontawesome-svg-core'; import { faUtensils } from '@fortawesome/free-solid-svg-icons'; library.add(faUtensils, myIcon);
- 使用 icon 方法并传入图标名称和属性：
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; <FontAwesomeIcon icon={['fas', 'utensils']} size="2x" />
深度解析
IconDefinition
其中的 IconDefinition 就是 FontAwesome 图标格式规范，定义了 icon、iconName 和 prefix 三个属性。
icon属性定义了 svg path 的路径数据，格式为：[ width, height, [], iconName, pathData ]。iconName定义了图标的名称。prefix定义了图标对应的 Fontawesome 库名称。
library.add
Add 方法用于向 FontAwesome 库中添加图标，在 render 之前将图标与库进行合并。
library.add(faUtensils, myIcon);
其中的 faUtensils 是 Fontawesome 官方提供的食物图标，定义了 free-solid-svg-icons 库、图标名称和属性。myIcon 是自定义的图标，定义了 IconDefinition 中的属性。
FontAwesomeIcon
最后，使用方法简单，使用 FontAwesomeIcon 组件进行渲染即可。
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; <FontAwesomeIcon icon={['fas', 'utensils']} size="2x" />
更多使用方式，查看 官方文档。
结语
本文详细介绍了如何使用 @fortawesome/fontawesome-common-types 来自定义 Fontawesome 图标，对于需要使用自定义图标的开发者来说是一份不可多得的学习指导。
最后推荐官方文档，里边涵盖了更多的使用方法和示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/fortawesome-fontawesome-common-types
