概述
在前端开发中，常常会用到各种图标，如箭头、加号、搜索等等。在设计师未提供图标文件时，我们便需要自己使用一些工具来生成。不过，如果我们能够使用现成的图标库，不仅可以减轻开发的工作量，同时也可以使得页面的图标风格更加统一。本文介绍了一个常用的 npm 包—— gfs-icons，它提供了数百个常用的图标，可以帮助我们快速构建一个美观的页面。
安装
使用 npm 安装 gfs-icons：
npm install gfs-icons
或者在 HTML 文件中直接引入链接：
<link href="https://cdn.jsdelivr.net/npm/gfs-icons@latest/css/gfs-icons.min.css" rel="stylesheet">
使用
使用 gfs-icons 非常简单，在 HTML 文件中添加一个 i 标签，并设置对应的 class 即可使用：
<i class="gfs-icon gfs-icon-arrow-left"></i>
其中 gfs-icon 是必须的 class，表示使用 gfs-icons 库中的图标。gfs-icon- 后面跟着图标的名称，比如 gfs-icon-arrow-left 就表示箭头向左的图标。gfs-icons 中的图标名称都是由实际意义的单词构成，非常直观易懂。
gfs-icons 官方提供了在线图标预览地址：https://gfs-icons.netlify.app/，可以查看所有图标的样式和名称。
高级用法
如果你想要更加个性化的图标，可以通过一些类名和 CSS 样式来实现。
变更图标颜色
gfs-icon 类默认是灰色的图标，在不同背景下可能显示不清晰。我们可以使用 text-* 类来改变字体颜色从而变更图标颜色：
<i class="gfs-icon gfs-icon-heart text-danger"></i>
这里的 text-danger 表示颜色为红色，更多颜色可选项可以参考 Bootstrap 文档。
改变图标大小
同样，我们可以通过控制 i 标签的 font-size 属性来改变图标的大小：
<i class="gfs-icon gfs-icon-camera" style="font-size: 24px;"></i>
添加动画效果
如果您想要在图标上添加一些动画效果来使页面更加生动，可以通过 CSS3 动画来实现。比如，您可以用如下的 CSS 代码来给一个箭头图标添加一些透明度和旋转动画：
-- -------------------- ---- -------
---------------- -
---------- ------ -- ---------
-
---------- ------ -
-- -
---------- -------------
-------- --
-
---- -
---------- ---------------
-------- ---
-
-添加完样式后，在 i 标签中添加刚才定义的类名即可：
<i class="gfs-icon gfs-icon-arrow-left gfs-icon-rotate"></i>
总结
gfs-icons 是一个非常实用的 npm 包，它可以提供大量常用的图标，可以使我们开发页面更加高效。除了本文介绍的用法之外，gfs-icons 还提供了多种图标展示方式（例如 svg、react 组件、webfont）和多种定制化的方法，如需要请访问官方文档进行学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609781e8991b448dece5