在前端开发中，我们经常会需要在 CSS 中使用 SVG 图标。而使用 SVG 图标最常用的方式就是将 SVG 图标编写到 CSS 中，通过 CSS 引用来展现。但是，手写 SVG 代码相对麻烦，且不太容易维护，因此我们可以使用 postcss-write-svg 这个 npm 包来自动生成 SVG 代码，让我们的开发更加便捷。
什么是 postcss-write-svg？
postcss-write-svg 是一个基于 PostCSS 的插件，它可以将 CSS 中的伪元素中的 HTML 内容转换成 SVG 的路径。使用该插件可以有效减少 CSS 文件的大小，提高页面加载速度。
如何使用 postcss-write-svg？
使用 postcss-write-svg 进行转换步骤如下：
安装 postcss 和 postcss-write-svg：
npm install postcss postcss-write-svg --save-dev
配置 postcss：
在项目根目录下，新建 postcss.config.js 文件：
module.exports = { plugins: [ require("postcss-write-svg")() ] };在项目的 package.json 文件中新增一个 script，用于运行 PostCSS：
"scripts": { "build:css": "postcss src/css/index.css -o dist/css/index.css" }在 CSS 文件中使用 postcss-write-svg：
添加以下内容到 CSS 文件中：
-- -------------------- ---- ------- ----- - --------- --------- - ------------- - -------- ----- ---------- - -- --- ---------------------------------------- ------ ---- -- - - - - -- -- -- - - - ------- ------------ --------------------- -------- ------ --------- --------- ---- -- ----- -- ------ ----- ------- ----- -
运行 PostCSS 转换 CSS 文件：
在命令行中运行以下命令：
npm run build:css
运行成功后，SVG 代码将被转换成路径代码并被写入 CSS 样式文件。
示例代码
为了更好地理解 postcss-write-svg 的使用方法，下面给出一个完整的示例代码。
HTML 文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
------------------------ ------------
----- ---------------- --------------------------- --
-------
------
---- -------------------
-------
-------CSS 文件：
-- -------------------- ---- ------- ----- - ------ ------ ------- ------ --------- --------- - ------------- - -------- ----- ---------- - -- --- ---------------------------------------- ------ ---- -- - - - - -- -- -- - - - ------- ------------ --------------------- -------- ------ --------- --------- ---- -- ----- -- ------ ----- ------- ----- -
PostCSS 配置文件 postcss.config.js：
module.exports = {
plugins: [
require("postcss-write-svg")(),
]
};然后在命令行中运行：
npm run build:css
即可生成转换后的 CSS 文件，供 HTML 文件引用。
总结
postcss-write-svg 是一款非常实用的 npm 包，在前端开发中可以提高开发效率，减少 CSS 文件的大小。它可以将伪元素中的 HTML 内容转换成 SVG 的路径，在前端开发中常常使用到。同时，在学习和使用中我们也需要注意，使用过程中需要认真配置和保证正确性和易读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca8ab5cbfe1ea061243c