简介
spirit-loader 是一个 NPM 包，用于在 Webpack 中轻松加载 SVG 精灵图。精灵图是指多张图片合并成一张图。精灵图提供了以下的好处：
- 减少 HTTP 请求次数
- 减少文件大小
- 方便管理和维护
安装
使用 spirit-loader 需要先安装 Webpack。
在命令行中运行以下命令安装 spirit-loader：
npm install spirit-loader --save-dev
使用
配置 Webpack
在配置文件中进行以下配置：
-- -------------------- ---- -------
-------------- - -
-- -------
------- -
------ -
-- -------
-
----- ------------------
---- -
--------------------
--------------
---------------
-
-
-
-
-创建精灵图
在工程中创建一个 src/assets/sprites 目录，并在其中存放多张 SVG 图片。这些图片会被 spirit-loader 自动合成。
在代码中使用
在代码中的引用 SVG 的地方，需要使用 require 语句引入并指定 symbolId 属性。
import avatarSvg from '@/assets/sprites/avatar.svg';
const avatarNode = document.createElement('div');
avatarNode.innerHTML = `
<svg><use xlink:href="${avatarSvg}#avatar"></use></svg>
`;
document.body.appendChild(avatarNode);上述代码中，${avatarSvg}#avatar 即为 avatar.svg 文件中 symbol 标签的 id。在合成的精灵图中，每个 SVG 文件都会合并成一个 symbol 标签，其 id 属性则分别对应源文件的 symbol 标签的 id。
总结
spirit-loader 可以帮助我们在 Webpack 中使用 SVG 精灵图，减少请求次数和文件大小，方便图片的管理和维护。使用时需要注意的是，在精灵图中需要使用每个 SVG 文件中的 symbol 标签的 id 属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709f8ccae46eb111f03c