在前端开发中，使用 SVG 图标成为了一种常见的方式。但是，每个图标都需要一个 HTTP 请求，这会导致页面加载速度变慢。为了解决这个问题，我们可以将所有的 SVG 图标打包成一个 sprite（精灵），使得只需要一个 HTTP 请求就能够获取所有的图标。
svg-sprite 是一个 npm 包，它提供了将多个 SVG 文件合并成一个 sprite 的功能。本文将介绍如何使用 svg-sprite。
安装
使用 npm 安装 svg-sprite：
npm install --save-dev svg-sprite
安装完成后，我们就可以使用 svg-sprite 了。
使用方法
将多个 SVG 文件合并成一个 sprite
首先，创建一个 src/icons 目录，并将所有的 SVG 图标放入其中。然后，我们可以使用 svg-sprite 将这些 SVG 图标合并成一个 sprite。
在项目根目录下创建一个 svg-sprite-config.json 文件，内容如下：
{
"dest": "public/svg",
"mode": {
"symbol": true
}
}这个配置文件指定了输出目录为 public/svg，并且使用 symbol 模式生成 sprite。
接着，在 package.json 中添加以下脚本：
"scripts": {
"build:sprite": "svg-sprite -c svg-sprite-config.json src/icons/*.svg"
}运行 npm run build:sprite 命令，就会生成一个 public/svg/sprite.svg 文件，其中包含了所有的 SVG 图标。
在 HTML 中使用 sprite
在 HTML 中使用 sprite 很简单。只需要添加以下代码：
<svg> <use xlink:href="sprite.svg#icon-name"></use> </svg>
其中，sprite.svg 是生成的 sprite 文件名，icon-name 是 SVG 图标的 ID。
下面是一个完整的例子：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------ ---------------
-------
--- -
-------- ------
------ ------
------- ------
------- - -----
-
--------
-------
------
-----
---- -----------------------------------------
------
------- ----------------------
-------
-------结论
使用 svg-sprite 可以将多个 SVG 图标合并成一个 sprite，从而减少 HTTP 请求，提高页面加载速度。虽然 svg-sprite 的使用比较简单，但它对前端开发非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51135