在前端开发中，常常需要使用到各种图标，通过使用图标可以使页面更加美观，同时也可以帮助用户更好地理解页面信息。在传统的前端开发中，我们需要手动下载各种图标文件，然后引入到项目中。如今，通过使用 npm 包简化了这一过程，simple-icons-css 就是其中一种方便的 npm 包。
什么是 simple-icons-css？
simple-icons-css 是一个简单易用的图标库，它包含了许多流行的图标，由 SVG 文件组成。simple-icons-css 是一个 npm 包，通过安装该包，我们可以快速地在项目中使用下载好的 SVG 文件，无需手动下载和配置。
如何安装和使用 simple-icons-css？
- 打开终端或控制台，进入项目的根目录，执行以下命令安装 simple-icons-css：
npm install simple-icons-css
- 在 HTML 文件中引入 simple-icons 的 CSS 文件。
<head> <link rel="stylesheet" href="node_modules/simple-icons-css/simple-icons.css"> </head>
- 在需要使用图标的地方，使用相应的 HTML 代码。
<body> <i class="si si-github"></i> </body>
其中，si-github 是 simple-icons-css 提供的 GitHub 图标。
如何使用其他图标？
除了 si-github 以外，simple-icons-css 还提供了许多其他的图标，你可以在 simple-icons 官网 找到需要使用的图标名称。
使用以下 HTML 代码即可引入相应的图标。
<i class="si si-图标名称"></i>
如何自定义 simple-icons-css？
如果 simple-icons-css 未提供所需的图标，我们可以通过自定义 simple-icons-css 实现。下面是自定义 simple-icons-css 的具体步骤：
- 下载 SVG 文件
从网络上下载想要使用的 SVG 文件，保存在项目中某个文件夹下。
- 生成 CSS
通过 simple-icons 官网的在线工具，上传刚刚下载的 SVG 文件，生成 CSS 代码，并拷贝到一个新建的 CSS 文件中。
- 引入新生成的 CSS 文件
在 HTML 文件中引入新生成的 CSS 文件。
<head> <link rel="stylesheet" href="自定义图标的 CSS 文件路径"> </head>
- 使用自定义的图标
可以通过如下方式使用自定义的图标。
<i class="si si-自定义图标名称"></i>
总结
通过 npm 包 simple-icons-css，我们可以快捷地在项目中使用各种流行的图标，使我们的页面更加美观。同时，通过自定义 simple-icons-css，我们可以实现更多种类的图标。在以后的前端开发中，我们可以更加轻松地使用 simple-icons-css，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005756d81e8991b448ea59d