在前端开发中，我们经常需要使用 SVG 图标来美化界面。但是，直接使用 SVG 图标可能会导致性能问题，因为每个图标都要发送一个独立的请求。为了解决这个问题，我们可以将这些 SVG 图标打包成一个 SVG Sprite，然后在需要的时候通过 CSS 来引用。
不过，在将 SVG 图标打包成 SVG Sprite 时，可能会遇到一些问题。比如，引用 SVG 图标时可能需要手动修改路径，而且在不同浏览器中可能还需要使用不同的 hack。这时，一个好用的 npm 包就可以帮助我们省去这些繁琐的操作。
本文将介绍一个使用 npm 包 @kossnocorp/desvg 来打包 SVG 图标的方法。这个 npm 包可以帮助我们自动处理 SVG 图标的路径，并生成可用于引用图标的 CSS。
什么是 @kossnocorp/desvg？
@kossnocorp/desvg 是一个用于生成 SVG Sprite 的 npm 包。它可以将多个 SVG 图标打包成一个 SVG Sprite，并自动处理图标的路径。使用该包可以让我们更加轻松地使用 SVG 图标，并减少打包后的文件大小。
使用方法
使用 @kossnocorp/desvg 的方法非常简单，仅需在命令行中输入以下命令：
npm install @kossnocorp/desvg --save-dev
安装完成后，在项目的根目录下创建一个名为 svg 的文件夹，然后将所有的 SVG 图标放在该文件夹中。
接下来，我们需要在项目中添加一些配置。在 package.json 文件中添加以下代码：
"scripts": {
"desvg": "desvg src/assets/svg --out-dir src/assets/sprites --namespace svg",
},在这段代码中，--out-dir 参数表示要将生成的 SVG Sprite 输出到哪个目录，--namespace 参数表示生成的文件名前缀。
在配置文件中添加好以上代码后，我们就可以在命令行中运行以下命令来生成 SVG Sprite：
npm run desvg
执行该命令后，@kossnocorp/desvg 会将指定文件夹中的 SVG 图标打包成一个 SVG Sprite，并生成对应的 CSS。生成的文件将会输出到刚才配置的目录中。
接下来，我们就可以在项目中使用这个 SVG Sprite 了。在需要使用图标的位置添加以下代码：
<svg> <use xlink:href="#svg-图标名称"></use> </svg>
其中，#svg-图标名称 就是这个 SVG Sprite 中对应图标的名称。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- ------- -- -- ----------------- - --- ------- ----------------- ---------- -- - ------------ --------- ---------- - -------- ------ -------------- --------- ------------------ ----------- ----- -- -- -- --- ------ --- --- ----- -- - ---- --------- ----- ---- ----------------------------- ------
总结
通过使用 @kossnocorp/desvg，我们可以更加轻松地生成 SVG Sprite 并引用图标。该 npm 包的使用方法非常简单，只需配置一下文件夹路径和输出目录，就可以自动生成 SVG Sprite，并且还会自动处理图标的路径。这个工具非常适合需要频繁使用 SVG 图标的前端开发者，可以大幅提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e6881e8991b448dbccd