在前端开发中，SVG 这种矢量图形格式被广泛应用于图标、logo 等需要缩放的图形展示。针对多个 SVG 文件的零散加载方式，推荐使用 npm 包 svg-sprite-data 进行合并、优化、压缩生成一个雪碧图，减少服务器请求次数和文件大小，提高页面渲染效率。
安装
svg-sprite-data 可以直接通过 npm 安装：
npm install svg-sprite-data
使用方法
1. 基本使用
将多个 SVG 文件放在一个目录内，sdk-sprite-data 提供了 api 将其转换成 SVG Sprite 单个文件。在使用时，只需要将这个 SVG Sprite 文件直接插入到 HTML 页面即可。
-- -------------------- ---- -------
----- -- - --------------
----- ------------- - ---------------------------
----- ---------- - --- ---------------
--------- -------
---- --------
--------- --------------------
---
----------------------------- -- -
----- --- - ------------------------------------ --------
-----------------
---2. 集成到构建流程
可以将 svg-sprite-data 集成到现有的构建流程中，例如使用 gulp 自动化构建维护项目，可以定义一个任务，监听 SVG 文件的修改，自动生成 Sprite。
-- -------------------- ---- -------
----- -- - --------------
----- ---- - ----------------
----- ------------- - ---------------------------
----------------------- -- -- -
----- ---------- - --- ---------------
--------- -------
---- --------------
--------- -------------
---
----- ------ - ----------------------------
------ -------------------------------------------------------
---
------------------ -- -- -
------------------------------- ---------------------------
---在这个任务中，监听 icon 目录下的 SVG 文件的变化，生成 Sprite 并保存到 dist 目录下，操作简单、高效。
3. 配置参数
- src: SVG 文件所在的目录路径。
- filename: 生成的 SVG Sprite 的文件名。
- inline: 是否使用 base64 编码实现内嵌。
- symbol: 是否使用子元素
<symbol>实现生成 SVG Sprite。推荐使用，这样容易进行图标复用和样式定义等操作。 - prefix: 自定义 ID 前缀。
- logLevel: 记录日志的级别。
示例代码
使用 svg-sprite-data 的示例代码：
<svg>
<use xlink:href="/sprite.svg#icon-home"></use>
</svg>其中 xlink:href 属性值为 sprite.svg 生成的 Sprite 文件的路径，# 后跟的是对应 SVG 的 id。
结语
svg-sprite-data 使用简单、方便，在多个 SVG 文件的场景下可以提高页面加载速度和代码维护效率，还可以结合前端自动化构建工具，实现自动化部署。建议掌握这个 npm 包的使用，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74471