在前端开发中，随着网页体验的逐渐提升，很多界面设计中大量使用 SVG 图片以及图标字体。而对于 SVG 图像使用的一个很好的解决方案便是使用 SVG sprites。其中，@beezyinc/dr-svg-sprites-bz 便是一个不错的选择。
简介
SVG sprites 可以大大减少 HTTP 请求次数，此外，SVG sprites 也能避免 SVG 图像引用的路径问题，以及在 CDN 加载时遇到的 CORS 问题。
@beezyinc/dr-svg-sprites-bz 就是一个 SVG sprites 的生成器，它可以将 SVG 图像合并为一个单独的 SVG 文件，并生成相应的 CSS 样式。你可以通过 npm 命令进行安装，使用它来使你的项目更加高效，同时代码更加整洁易读。
安装
@beezyinc/dr-svg-sprites-bz 是一款 npm 包，安装方式与常规 npm 包相同。你可以选择全局安装，也可以在项目中进行本地安装。
# 全局安装 npm install -g @beezyinc/dr-svg-sprites-bz # 本地安装 npm install --save-dev @beezyinc/dr-svg-sprites-bz
配置
在你的项目中，你需要提供一个配置文件 dr-svg-sprites.bzl，它会告诉@beezyinc/dr-svg-sprites-bz 如何生成 SVG sprites。
-- -------------------- ---- -------
-
-------- -----------------------
--------- -
------------ ---------
--------- ------------
-------- -----------
--
----------- -----
---------- -----
------------ -
------ --------------------
-
-以上配置文件中，input 表示输入的 SVG 文件所在的路径；output.sprite 表示输出的 SVG sprites 文件名；output.style 表示输出的 CSS 样式文件名。详细配置项见官方文档。
在此之后，你可以在 package.json 文件中添加相应的命令：
{
"scripts": {
"sprites": "dr-svg-sprites-bz -c dr-svg-sprites.bzl"
}
}使用
运行 npm run sprites 命令会自动将 SVG 图像合并为一个 SVG sprites 文件，同时也会生成相应的 CSS 样式文件。此外，你还需要在你的 HTML 文件中引入该 SVG sprites：
-- -------------------- ---- -------
--------- -----
------
------
---
----- ---------------- -----------------
-------
------
---
---- ---------- ---------------- ---------------------------------------------
---
-------
-------示例代码
在下面的代码中，我们将会使用两张 SVG 图像来生成 SVG sprites。这些 SVG 图像被保存在 src/icons 目录下。配置文件 dr-svg-sprites.bzl 中，我们将指定 input 为 ./src/icons/**/*.svg，这意味着我们将在该目录及其所有子目录中查找所有的 SVG 文件。
icon1.svg
<svg xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="25" height="25" fill="#000"></rect> </svg>
icon2.svg
<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="12.5" cy="12.5" r="10" fill="#fff"></circle> </svg>
dr-svg-sprites.bzl
-- -------------------- ---- -------
-
-------- -----------------------
--------- -
------------ ---------
--------- ------------
-------- -----------
--
----------- -----
---------- -----
------------ -
------ --------------------
-
-index.html
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------------------------- ----------
----- ---------------- ------------------ --
-------
------
------------------------------- -------
---- --------------
---- ---------- ---------------- -------------------------------------------
---- ---------- ---------------- -------------------------------------------
------
------- --------------------------
-------
-------icons.css
-- -------------------- ---- ------- ------ - ------ ----- ------- ----- ----------------- ----------------- -------------------- --- ---- - ------- ------ ----- ------- ----- ----------------- ----------------- -------------------- ----- ---- -
经过以上配置后，运行 npm run sprites，即可在 dist 目录中生成 icons.svg 和 icons.css 文件。运行示例代码后，页面中将展示两个 SVG 图像的合并结果。
总结
通过学习使用 @beezyinc/dr-svg-sprites-bz，我们可以更好的管理我们的 SVG 图像，在减少 HTTP 请求、避免路径问题等方面有很大的作用。同时，使用 SVG sprites 的好处还有很多，比如可以避免在移动端加载 SVG 字体的兼容性问题等。希望今天的文章能帮助到你，使你的前端开发变得更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005674181e8991b448e3c50