在前端开发中，我们通常会遇到需要使用多个 SVG 图标的情况。若每次使用都单独引入一个 SVG 文件，其引用率和加载速度都会成为问题。这时，我们可以使用 broccoli-svgstore 工具将多个 SVG 文件合并成一个 SVG sprite，从而提高网站性能并方便管理。
1. 安装 broccoli-svgstore
在使用 broccoli-svgstore 之前，我们需要先安装它。
npm install --save-dev broccoli-svgstore
安装完成后，我们需要先了解一下如何使用 broccoli，因为 broccoli-svgstore 是建立在 broccoli 之上的。
2. 了解 broccoli
broccoli 是一个构建工具，它的作用是将源代码转换为静态资源。与其他构建工具不同，broccoli 不会将源代码打包进一个文件中，而是将每个文件的变化实时反映到输出目录中。
先通过 npm 安装 broccoli。
npm install --save-dev broccoli
下面是 broccoli 常用的 API。
makeTree(inputTree: BroccoliTree, options? :any): BroccoliTree：创建一个树。watch(inputTree: BroccoliTree, options? :any): WatchNode：监视一个树，并返回观察节点。outputNodeToString(outputNode: OutputNode): string：从输出节点读取所有文件的内容，并返回它们的字符串表示形式。
3. 使用 broccoli-svgstore
3.1 示例图标文件
我们有 3 个 SVG 图标文件：check.svg、warning.svg 和 error.svg，它们存在于 icons 目录下。
├── icons/
│ ├── check.svg
│ ├── warning.svg
│ └── error.svg
└── dist/
└── assets/
└── icons.svg3.2 创建树对象
使用 broccoli 的 makeTree 方法创建树对象。我们需要传入两个参数，第一个参数是包含图标文件的输入树，第二个参数是配置对象。配置对象中有个 outputFile 属性用于指定输出文件路径。
const { SVGStore } = require("broccoli-svgstore");
const tree = new SVGStore(["icons"], {
outputFile: "dist/assets/icons.svg",
});3.3 构建
使用 broccoli 的 outputNodeToString 方法读取输出节点，并返回它们的字符串表示形式。
const { join } = require("path");
const { writeFileSync } = require("fs");
(async () => {
const output = await tree.build();
const str = outputNodeToString(output);
writeFileSync(join(__dirname, "dist/assets/icons.svg"), str);
})();3.4 示例代码
-- -------------------- ---- ------- ----- - -------- - - ----------------------------- ----- - ------------------ - - ----------------------------- ----- - ---- - - ---------------- ----- - ------------- - - -------------- ----- ---- - --- ------------------- - ----------- ------------------------ --- ------ -- -- - ----- ------ - ----- ------------- ----- --- - --------------------------- ----------------------------- ------------------------- ----- -----
以上就是使用 broccoli-svgstore 的完整示例代码。当执行代码后，icons 目录下的 SVG 文件就会合并为一个 icons.svg 文件保存在 dist/assets 目录下。这样，我们就可以在网站中使用 <use> 标签来加载该文件中的多个 SVG 图标。
总结
broccoli-svgstore 是一个非常有用的工具，它方便地解决了使用多个 SVG 图标时的引用率和加载速度问题。同时，学习了本篇文章，你也能更好地掌握 broccoli 构建工具的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5152