比起以前，现在现代化的前端工具越来越多，码农工作效率也越来越高。其中一个很有用的工具就是 mimosa-svgstore，它可以把 SVG 合并成一张 SVG Sprite 图片，大大优化 SVG 图片的加载速度。
本文将详细介绍 mimosa-svgstore 的使用方法，帮助初学者更好地使用它。
安装
mimosa-svgstore 是一个在 Node.js 上运行的插件，因此你需要使用 npm 进行安装。如果你尚未安装 Node.js 那么你需要先安装。
npm install -g mimosa npm install mimosa-svgstore --save-dev
如何使用 mimosa-svgstore
mimosa-svgstore 是一个 mimosa 模块，依赖于 mimosa 文件夹结构，用来处理图片等静态资源文件。使用 mimosa-svgstore 需要做以下几个步骤:
- 在
mimosa-config文件中引用该模块:
-- -------------------- ---- ------- -------------- - - -------- - ---------- -- --------- - -------- ------------------------------ ----------- -------------------------- - -展开代码
mimosa-svgstore 的主要参数如下：
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| sources | String 数组 | 必填 | 要汇总在一起的 SVG 文件 |
| outputFile | String | 必填 | 输出文件名，并保存在项目目录下 |
- 在 HTML 中使用 SVG Sprite
mimosa-svgstore 处理完成后，我们就可以在 HTML 中使用合并后的 SVG 文件。只需在 HTML 中添加类似下面这段代码：
<svg> <use xlink:href="assets/images/sprite.svg#icon-1"></use> <use xlink:href="assets/images/sprite.svg#icon-2"></use> <use xlink:href="assets/images/sprite.svg#icon-3"></use> </svg>
其中 xlink:href="assets/images/sprite.svg#icon-1" 中的 icon-1 是你最终要使用的 SVG 图标的 ID。
示例
假设你的项目目录结构如下所示：
-- -------------------- ---- ------- ---- ------- ------- ------ ---------- ---------- ---------- ----- ------------- ----------------展开代码
在这种情况下，你的 mimosa-config.js 文件应该是这样的：
-- -------------------- ---- ------- -------------- - - -------- - ---------- -- --------- - -------- ------------------------------ ----------- -------------------------- - -展开代码
最终合成的 SVG 文件会自动保存在 assets/images/sprite.svg 中。
在 HTML 中，你可以像下面这样引用 SVG 图标：
<svg> <use xlink:href="assets/images/sprite.svg#icon-1"></use> <use xlink:href="assets/images/sprite.svg#icon-2"></use> <use xlink:href="assets/images/sprite.svg#icon-3"></use> </svg>
结论
mimosa-svgstore 插件方便快捷地将 SVG 图标整合到一个 Sprite 中，这样可以提高网站的性能，并减少网络请求。希望本文对前端开发者有所帮助。
完整示例代码放在 GitHub 上，欢迎大家参考和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f471d8e776d08041057
