在前端开发过程中，使用 SVG 图片已经成为了一个趋势。但是在实际使用中，我们可能需要将多个 SVG 图标作为一个雪碧图在页面中使用。这时就需要用到svg-as-symbol-loader-fixed-ids这个 npm 包。
什么是 svg-as-symbol-loader-fixed-ids
svg-as-symbol-loader-fixed-ids是一个用于将多个 SVG 图标合并为一个雪碧图的 webpack loader，它会将 SVG 文件中的所有 symbol 元素提取出来，并修改其 ID，使其不重复，最后将所有 symbol 元素放入一个新的 SVG 文件中，以此实现多个 SVG 图标的合并。
如何使用 svg-as-symbol-loader-fixed-ids
在使用 svg-as-symbol-loader-fixed-ids 之前，需要先安装该 npm 包，可以通过以下命令进行安装：
npm install svg-as-symbol-loader-fixed-ids --save-dev
在 webpack 配置文件中，针对需要合并的 SVG 文件进行相关配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
-
------- ---------------------------------
-------- -
----- ------------
----------- ----------
----------- -----------
--
--
--
--
--
--
-- ---
-其中，name、outputPath 和 publicPath 分别表示合并后的 SVG 文件名、输出路径以及公共路径。
在 HTML 文件中，加载已合并的 SVG 文件并使用其中的 symbol 元素即可：
<svg viewBox="0 0 32 32"> <use xlink:href="/assets/icons.svg#icon-example"></use> </svg>
示例代码
以下示例演示了如何将两个 SVG 图标合并为一个雪碧图：
SVG 文件 1：example-1.svg
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd">
<path d="M1.5 7h13l-4.5-4.5v9z"/>
</g>
</svg>SVG 文件 2：example-2.svg
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd">
<path d="M3 5h12v2H3zM3 9h12v2H3z"/>
</g>
</svg>webpack 配置文件
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
-
------- ---------------------------------
-------- -
----- ------------
----------- ----------
----------- -----------
--
--
--
--
--
--
-- ---
-HTML 文件
<svg viewBox="0 0 32 32"> <use xlink:href="/assets/icons.svg#icon-example-1"></use> <use xlink:href="/assets/icons.svg#icon-example-2"></use> </svg>
在页面中，将会出现包含两个图标的 SVG 雪碧图。
学习意义和指导意义
svg-as-symbol-loader-fixed-ids 这个 npm 包可以让我们更加方便地组织 SVG 图标，并提高页面性能。在实际开发中，我们经常会遇到多个 SVG 图标需要合并的情况，因此使用这个 npm 包可以减少我们的工作量并提高效率。
通过本文的学习，我们可以了解到如何使用 svg-as-symbol-loader-fixed-ids 进行 SVG 图标合并，并对 webpack 配置有了更加深入的了解。对于正在学习 webpack，或者需要使用 SVG 图标的前端开发者而言，本文具有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005541381e8991b448d16c0