在前端开发中，我们经常需要使用图标来装饰网站，但是手写 icon 效率低、不易修改，因此经常使用成套的图标库。
在这里，我们介绍一种非常实用的 npm 包 glyo，它支持数千种图标，而且还可以自定义颜色、大小，非常方便。
安装 glyo
使用 npm 安装 glyo 非常简单，可以使用以下命令：
npm install glyo --save
也可以使用 yarn：
yarn add glyo
使用 glyo
使用 glyo，首先需要在 HTML 中引入 glyo 的 CSS 文件：
<link rel="stylesheet" href="node_modules/glyo/css/glyo.css">
然后在需要使用图标的地方，在 HTML 中添加一个 glyo 的元素，并设置它的 class 和 data-glyo 属性：
<span class="glyo glyo-adjust" data-glyo="adjust"></span>
其中，class 中设置 glyo 表示这是一个 glyo 的元素，而 data-glyo 属性则指定了该元素所使用的图标的名称，本例中设置为 adjust。
自定义 glyo
使用 glyo，我们可以非常方便地自定义图标的颜色和大小。
例如，我们将 adjust 图标的颜色设置为红色，大小为 32px，可以使用以下 CSS：
.glyo-adjust {
color: red;
font-size: 32px;
}示例代码
以下是一个完整的使用 glyo 的 HTML 示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----------- ------------
----- ---------------- --------------------------------------
-------
------------ -
------ ----
---------- -----
-
--------
-------
------
----- ----------- ------------ --------------------------
-------
-------总结
使用 glyo，我们可以非常方便地添加图标，而且还可以自定义图标的颜色、大小，非常实用。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f4d81e8991b448dcd2b