在现代的 Web 开发中，SVG 图标已经成为了常用的一种图标类型。如果我们需要使用多个 SVG 图标时，单独引入每个 SVG 文件会导致 HTTP 请求过多，降低应用性能。webpack-svgstore-plugin 可以将多个 SVG 图标打包成一个 SVG sprite，从而解决这个问题。
安装和配置 webpack-svgstore-plugin
首先，我们需要安装 webpack-svgstore-plugin：
npm install --save-dev webpack-svgstore-plugin
然后，在 webpack 配置文件中添加以下内容：
-- -------------------- ---- -------
----- ----------------- - -----------------------------------
-------------- - -
-- ---
-------- -
--- -----------------
------------ -
-------- -------------- ------
--
------- -------
--
-
--WebpackSvgStore 插件的 svgoOptions 属性可以配置 SVG 的优化选项。上面的例子表示删除所有 SVG 中的标题。prefix 属性用于为生成的 SVG sprite 中的每个 SVG id 添加前缀。
在 HTML 中使用 SVG sprite
生成的 SVG sprite 将会被打包到输出目录下的一个文件中。我们可以在 HTML 页面中通过 <use> 标签来使用其中的 SVG 图标。例如：
<svg> <use href="/sprite.svg#icon-heart"></use> <use href="/sprite.svg#icon-star"></use> </svg>
上面的代码将在页面上显示心形和星形两个 SVG 图标。
示例代码
下面是一个完整的 webpack 配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- -
-
------- -----------------
-------- -
------ ------
----- -----------------------
-
-
-
-
-
--
-------- -
--- -----------------
------------ -
-------- -------------- ------
--
------- -------
--
-
--在上面的配置中，我们使用了 svg-url-loader 来加载 SVG 文件。WebpackSvgStore 插件将生成的 SVG sprite 打包到输出目录下的 sprite.svg 文件中。同时，为每个 SVG id 添加了 icon- 前缀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47481