介绍
svg-stack 是一个可以方便地将多个 SVG 图标合并成一个的 npm 包。它可以帮助前端开发者将多个小图标合并为一张图标，减少 HTTP 请求的数量，提升网页的性能。同时，它还支持一些基础的图标合并变换操作，如旋转、缩放、平移等，让开发者可以更灵活地控制图标的合并效果。
安装
可以使用 npm 包管理器来安装 svg-stack：
npm install svg-stack
安装完成后，我们需要在项目中引入 svg-stack：
const { SvgStack } = require('svg-stack');使用
使用 svg-stack，我们需要传入要合并的 SVG 图标的路径，并设置合并后的图标的参数，如宽高、颜色等。下面是一个例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- - -------- - - ---------------------
----- -------- - --- ----------
----------------------- -------------
----------------------- -------------
----------------------- ------------
-- -
------ ---
------- ---
----- ---------
---
------------------------------其中，第一个参数是要合并的 SVG 图标的路径数组。第二个参数是要合并后的图标的参数，可以设定宽高、颜色等属性。在上面的例子中，我们设置了宽高为 32px，颜色为白色。
使用完毕后，我们可以通过 render() 方法获得合并后的 SVG 图标的字符串，然后将其嵌入到 HTML 中即可。
图标变换操作
使用 svg-stack，我们可以通过一些简单的操作来变换合并后的图标。接下来，我们将介绍一些常用的操作。
缩放
可以通过 scale() 方法来对图标进行缩放操作。该方法接收一个参数，表示缩放的比例。例如，下面是对图标进行 50% 缩放的操作：
svgStack.scale(0.5);
旋转
可以通过 rotate() 方法来对图标进行旋转操作。该方法接收一个参数，表示旋转的角度。例如，下面是对图标进行 90° 旋转的操作：
svgStack.rotate(90);
平移
可以通过 translate() 方法来对图标进行平移操作。该方法接收两个参数，分别表示水平方向和垂直方向的移动距离。例如，下面是对图标进行水平方向移动 10px，垂直方向移动 20px 的操作：
svgStack.translate(10, 20);
组合变换
上面的变换操作可以组合使用，从而实现更加复杂的图标变换效果。例如，下面是先进行 180° 旋转，再进行 50% 缩放，最后进行水平方向移动 10px 的操作：
svgStack.rotate(180).scale(0.5).translate(10, 0);
总结
svg-stack 是一个方便的 npm 包，可以帮助我们将多个 SVG 图标合并成一个图标，并支持一些基础的变换操作。它的使用非常简单，为前端开发者减少了不少的代码量和维护成本。同时，它也可以提升网站的性能，为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc581e8991b448dd2dd