在前端开发中，图标是一个经常使用的元素，在设计网站或应用时，我们通常需要添加各种不同类型的图标。Icono 是一个轻量级的 npm 包，提供了一组简单、易用和高度自定义的图标。
安装
你可以使用 npm 来安装 icono：
npm install icono --save
使用
引入 CSS 文件
你需要将 icono.css 文件引入到你的 HTML 文件中，以便在页面中使用 Icono 图标。
<link rel="stylesheet" href="node_modules/icono/dist/icono.min.css">
使用 Icono 图标
在 HTML 中使用 Icono 图标非常简单，只需要添加一个带有 .icono- 前缀的 class 名称，并指定想要的图标名称即可。
<i class="icono-home"></i>
这将会渲染一个名为 "home" 的图标。
自定义
Icono 具有非常强大的自定义功能，可以通过修改 CSS 变量来修改图标的颜色、大小和其他样式属性。
颜色
要更改图标的颜色，可以设置 CSS 变量 --icono-color。
.icono-home {
--icono-color: red;
}大小
要更改图标的大小，可以设置 CSS 变量 --icono-size。
.icono-home {
--icono-size: 30px;
}其他属性
Icono 还支持其他一些 CSS 变量，例如：
--icono-stroke-width：设置图标的边框宽度。--icono-stroke-color：设置图标的边框颜色。--icono-fill：设置图标的填充颜色。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ---------------
----- ---------------- ---------------------------------------------
-------
----------- -
------------- -----
-------------- ----
-
--------
-------
------
-- -----------------------
-------
-------总结
Icono 是一个非常实用的 npm 包，可以帮助前端开发者轻松地添加自定义图标。通过修改 CSS 变量，我们可以轻松地定制图标的样式，并让它们与我们的设计风格保持一致。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33674