在现代 web 开发中，使用 SVG 图像文件已经变得越来越常见。要使用大量的 SVG 可能需要创建整个图标系统。这时候，webpack-svg-sprite-wrapper 是一个非常有用的 npm 包，它可以将大量的 SVG 文件打包成一个 SVG sprite，从而减少 HTTP 请求，提高页面加载速度。
本文将介绍 webpack-svg-sprite-wrapper 的使用方法，帮助初学者了解如何使用这个 npm 包来打包 SVG。
安装
使用 npm 安装 webpack-svg-sprite-wrapper：
npm install webpack-svg-sprite-wrapper --save-dev
使用
在 webpack.config.js 文件中，添加以下代码：
-- -------------------- ---- -------
----- ---------- - --------------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- --------------------
--
--
--
-------- -
--------------------
--
--以上代码添加了一条针对 SVG 文件的 loader 规则并配置了 SVG sprite 插件。
配置选项
loader 配置选项参考：
extract: 布尔值，表示是否将 SVG 打包到单独的文件中，默认为 true（在默认情况下，SVG 将被包含在 JavaScript 中定义的 Sprite 中）。
具体代码如下：
{
test: /\.svg$/,
use: SVGSprites.loader({ extract: true }),
},插件配置选项参考：
filename: 定义 SVG sprite 图像的文件名。默认为sprite.svg。options: 对 svg-sprite-loader 的其他配置选项进行设置，可用于定制光标，边距，滤镜等配置。详情请参阅 svg-sprite-loader 文档。
具体代码如下：
-- -------------------- ---- -------
-------- -
-------------------
--------- --------------
-------- -
-------- -----
--------------- -----------------
-
---
--示例代码
下面的代码演示如何在 Vue.js 应用程序中使用 SVG sprite。
假设有这样一个组件：
-- -------------------- ---- -------
----------
-----
---- -------------
---- ------------------------------
------
---- -------------
---- -------------------------------
------
------
-----------可以在 Vue.js 的 mounted 生命周期中注册 SVG sprite：
-- -------------------- ---- -------
------ ------ ---- -------------------
------ ------- -
--------- -
----- --- - ------------------------------
----------------- - -------
------------- - -------
------------------------------- --------------------------
--
--此代码加载了 sprite.svg 文件，将其插入到 body 元素中的第一个位置，从而运行 SVG sprite。
结论
webpack-svg-sprite-wrapper 是一个非常有用的 npm 包，它可以将大量的 SVG 文件打包成一个 SVG sprite，从而减少 HTTP 请求，提高页面加载速度。在本文中，我们介绍了 webpack-svg-sprite-wrapper 的使用方法，并提供了示例代码，帮助读者了解如何在 Vue.js 应用程序中使用 SVG sprite。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f72775841da