在前端项目开发中，使用 SVG 图标已经成为了主流。而随着项目规模的增大和图标数量的增多，管理和使用 SVG 图标也变得越来越麻烦。web-svg-sprite-loader 这个 npm 包可以帮助我们快速地生成 SVG 图标的雪碧图，并提供一组方便的 API，简化我们在项目中使用 SVG 图标的流程。
什么是 SVG 图标雪碧图
在传统雪碧图中，我们把多个小图标拼接成一个大图，并利用 CSS 中的 background-position 属性来定位使用其中的某个图标。而 SVG 图标雪碧图则是将多个 SVG 图标拼接成一个大的 SVG 文件，并在其中定义每一个图标的 ID，以供使用时通过 ID 来直接引用其中的某一个图标。
SVG 图标雪碧图的优点在于可以使用 CSS 对 SVG 图标进行修改，而且可以避免一次性加载多个小图标造成的网络请求开销。
web-svg-sprite-loader 基本用法
web-svg-sprite-loader 的基本用法非常简单，只需要在 webpack 配置中加入对该 loader 的编译规则即可。首先，我们需要安装该包，命令如下：
--- ------- --------------------- ----------
然后，在 webpack 配置文件中添加以下配置：
-------------- - -
------- -
------ -
-- ---
-
----- --------- -- ---- --- --
---- -
-------------------- -- - --- --------
----------------------- -- -- --- --------- --
-
-
-
-
-这样配置之后，在使用 SVG 图标时，只需要引入生成的雪碧图文件即可：
---- ------------ ------------------- ---- -------------------------------------- ------
其中，icon-id 是我们在 SVG 文件中定义的某一个图标的标识符。
web-svg-sprite-loader 高级用法
web-svg-sprite-loader 提供了一组 API，使得我们可以进一步定制生成的雪碧图，以及指定 SVG 文件中每个图标的 ID。
定制雪碧图样式
在默认情况下，web-svg-sprite-loader 会自动为我们生成一份样式，在雪碧图和每个图标的 CSS 类之间建立对应关系。如果我们需要进一步定制这份样式，可以将通过选项对象的 spriteMetadata 函数来自定义样式。该函数返回一个 JavaScript 对象，该对象的 key 值是图标的 ID，value 值是一个对象，包含对应的 CSS 样式。
以下是一个自定义样式的例子：
-------------- - -
------- -
------ -
-- ---
-
----- ---------
---- -
-
------- --------------------
-------- -
-- ---
--------------- ----- -- -
------ -
------------ - ------ ------ ----- -- -- ----
------------ - ------ ----------- - -- -- --- -
--
-
-
--
-----------------------
-
-
-
-
-指定 ID 的生成规则
默认情况下，web-svg-sprite-loader 会自动为每个图标生成一个唯一的 ID，该 ID 的格式为 'svgicon-[path]'，其中 [path] 是文件路径中的斜杠 (/) 替换为下划线 (_)。如果我们需要自定义 ID 的生成规则，可以通过 loader 选项来指定。
以下是一个自定义 ID 的例子：
-------------- - -
------- -
------ -
-- ---
-
----- ---------
---- -
--------------------
-
------- ------------------------
-------- -
------------ ------ ----- -- ----------------- -- --- -- ----
-
-
-
-
-
-
-示例代码
为了更好的说明 web-svg-sprite-loader 的使用方法，这里给出一个完整的示例代码。
首先，安装依赖包：
--- ------- ------- -- --- ------ ---------- --- ------- --------------------- ----------------- ----------
其中，vue-cli 是一个方便生成 vue 项目的工具。
然后，在 webpack.config.js 中配置 loader：
-------------- - -
------- -
------ -
-- ---
-
----- ---------
---- -
--------------------
-
------- ------------------------
-------- -
------------ ------ ----- -- -----------------
-
-
-
-
-
-
-最后，在 App.vue 中使用 SVG 图标：
----------
-----
---- ------------ -------------------
---- -----------------------------------------------
------
------
-----------
--------
------ ------- -
----- -----
-
---------这样，我们就可以在页面上显示一个 SVG 图标了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d1f81e8991b448dacf1