简介
simple-line-icons 是一组包含 189 个矢量图标的开源图标库，可通过 npm 包安装并用于前端开发。这些图标设计简洁且易于使用，可以为你的项目提供优美的视觉效果。
安装
要使用 simple-line-icons，你需要先安装它。你可以使用 npm 包管理器来完成这项任务，如下所示：
npm install simple-line-icons --save
这将在你的项目中安装这个图标库，并将其添加到 package.json 文件中的依赖项中。
引入
使用 simple-line-icons 很简单，你只需要将样式表引入到你的 HTML 页面中即可。你可以直接从 node_modules 文件夹中引入 CSS 文件，也可以将其复制到你的项目中并从本地文件进行引入。
从 node_modules 文件夹引入的代码示例：
<head> <link rel="stylesheet" href="./node_modules/simple-line-icons/css/simple-line-icons.css"> </head>
从本地文件引入的代码示例：
<head> <link rel="stylesheet" href="./css/simple-line-icons.css"> </head>
使用
你现在已经准备好开始使用 simple-line-icons 来增强你的前端项目了。简单添加一个使用 icon-user 的示例：
<i class="icon-user"></i>
这就是全部！只需将带有相应类名的 标签添加到你的 HTML 中，即可使用这些图标。
自定义
如果你想自定义 simple-line-icons 的样式，可以重写 CSS 类来达到目的。例如，以下代码将改变 icon-user 的颜色：
.icon-user {
color: red;
}你也可以使用其他 CSS 属性对 simple-line-icons 进行自定义。
总结
simple-line-icons 是一款易于使用且功能强大的开源图标库，它可以为你的项目提供简洁而美观的矢量图标。你可以用 npm 安装并在你的前端项目中使用它，只需引入样式表和在 HTML 中添加相应类名即可开始使用。如果需要自定义，你可以通过修改 CSS 类来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35009
