Webpack插件Webpack-SVG-Spritely：构建SVG精灵
Webpack-SVG-Spritely是一个Webpack插件，用于将多个SVG文件合并成一个SVG精灵。该插件的工作原理如下：
- 收集SVG文件: Webpack-SVG-Spritely会扫描Webpack构建中所有引入的SVG文件。
- 生成符号: 插件将每个SVG文件转换为一个独立的符号，并为其分配唯一的ID。
- 创建精灵: 插件将所有生成的符号整合到一个SVG精灵文件中。
- 输出文件: Webpack-SVG-Spritely将生成的SVG精灵文件写入磁盘或文档。
使用Webpack-SVG-Spritely，开发者可以在浏览器中加载单个SVG精灵文件，并通过符号ID引用和显示单个SVG图标。
安装:
npm i --save-dev webpack-svg-spritely
Webpack配置:
const WebpackSVGSpritely = require('webpack-svg-spritely');
// ... Webpack 配置 ...
module.exports = {
// ...
plugins: [
new WebpackSVGSpritely(),
],
};
评论区