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