简介
svg-baker-runtime 是一个能够将多个 SVG 文件打包成一个 SVG sprite 的 npm 包。它可以减少 HTTP 请求，提高页面渲染速度，并且可以方便地使用其中的每个 SVG 图标。
安装
npm install svg-baker-runtime --save
使用
1. 在 HTML 中引入 SVG Sprite
首先，在 HTML 中引入 SVG Sprite。
<svg class="icon" style="display: none;"> <use xlink:href="/path/to/sprite.svg#icon-name"></use> </svg>
这里，.icon 是一个自定义的类名，用于区分 SVG 图标和其他 SVG 元素。在 xlink:href 中，/path/to/sprite.svg 是 SVG sprite 文件的路径，icon-name 是要使用的图标名称。
2. 创建 SVG Sprite
接下来，我们需要创建 SVG Sprite。可以使用以下代码：
import svgBakerRuntime from 'svg-baker-runtime'; const sprite = svgBakerRuntime();
这里，svgBakerRuntime() 函数返回一个用于创建 SVG Sprite 的实例。
3. 添加 SVG 图标
接下来，我们需要向 SVG Sprite 添加 SVG 图标。可以使用以下代码：
sprite.addIcon('icon-name', '<svg>...</svg>');其中，'icon-name' 是图标名称，'<svg>...</svg>' 是 SVG 图标代码。
4. 生成 SVG Sprite
最后，我们需要生成 SVG Sprite 并将其插入到 HTML 中。可以使用以下代码：
sprite.bake('path/to/sprite.svg').then(() => {
console.log('SVG sprite has been baked!');
});其中，'path/to/sprite.svg' 是 SVG Sprite 的文件路径。在 bake() 方法完成后，SVG Sprite 将被写入文件中。
示例
下面是一个完整的示例代码，用于创建包含两个 SVG 图标的 SVG Sprite。
-- -------------------- ---- -------
--------- -----
------
------
---------- ------ ---------------
-------
------
------- ------ ------------
---- ------------ --------------- -------
---- ----------------------------------------------
---- ----------------------------------------------
------
------- ------------------------
-------
--------- -------------------- ---- ------- -- -------- ------ --------------- ---- -------------------- ----- ------ - ------------------ ------------------------ ------------------ ------------------------ ------------------ ----------------------------------------- -- - ---------------- ------ --- ---- --------- ---
结论
SVG Sprite 是一种有效减少 HTTP 请求、提高页面渲染速度的方法。npm 包 svg-baker-runtime 可以方便地创建 SVG Sprite，通过本文介绍的简单步骤，你可以轻松地开始使用它，并提高你前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44213