在前端开发中，经常需要使用到各种不同的图标来装饰页面，这时候使用 FontAwesome 字体图标库便是个不错的选择。但是，如果每个标签都手动添加类名和样式的话，会让代码变得冗余不易维护，这时候我们可以使用 fa-icon-element 这个开源的 npm 包来快速地添加图标。
什么是 fa-icon-element
fa-icon-element 是一个基于 lit-element 的 Web Component，用于在页面上呈现 FontAwesome 图标。
它不依赖于任何框架或库，可以与 Vue、Angular、React 和其他框架一起使用。
安装
你可以通过 npm 来安装 fa-icon-element：
npm install fa-icon-element
使用方法
使用 fa-icon-element 很简单，只需要在 HTML 中添加如下代码即可：
<fa-icon-element className="fa fa-home"></fa-icon-element>
这样就可以在页面上添加一个 FontAwesome 的 home 图标了。
可以自定义样式
你还可以自定义 fa-icon-element 的样式，比如修改它的颜色、大小等等：
fa-icon-element {
color: black;
font-size: 2rem;
}支持更多的 FontAwesome 图标
fa-icon-element 支持的图标类型非常丰富，你可以到 FontAwesome 官网上查找喜欢的图标，然后将图标的类名添加到 fa-icon-element 的 className 中即可。
比如，想要添加一个金钱的图标：
<fa-icon-element className="fa fa-money"></fa-icon-element>
使用属性绑定
除了通过 className 添加类名外，你还可以使用属性绑定的方式来添加 fa-icon-element 的类名和样式。
比如，你可以使用属性绑定来动态地设置图标：
<fa-icon-element
.className="${'fa fa-' + icon}"
.style="${{ color: 'red', fontSize: '2rem' }}"
></fa-icon-element>这样，你就可以在页面渲染时动态地设置图标类名和样式了。
示例
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------------------- ------------
------- ------------- ----------------------------------------------------------------------
-------
--------------- -
------ -----
---------- -----
------------- -----
-
--------
-------
------
---------------- ------------- ---------------------------
---------------- ------------- ----------------------------
---------------- ------------- ---------------------------
----------------
----------------- ---- - ------
----------- ------ ------ --------- ------ ---
-------------------
--------
----- ----- - ------- -------- ----------
--- - - --
-------------- -- -
------------------------------------------------------------------------- ------- - ----
----
-- ------
---------
-------
-------在浏览器中打开上面的代码，你就会看到 fa-icon-element 的魔法效果了。
总结
fa-icon-element 是一个非常方便的 npm 包，它可以帮助我们快速地在页面中添加 FontAwesome 图标，并可以自定义样式。它的使用也非常简单，无需依赖其他库或框架，适合各种开发场景。
当然，它的使用也需要一定的学习和理解，希望这篇文章可以给你带来一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c181e8991b448e31c1