什么是 svgstore-cli？
svgstore-cli 是一个 NPM 包，它可以将多个 SVG 文件合并为一个 SVG 文件，并且可以对其中的每个 SVG 元素进行重命名、添加 class 等操作。这个工具可以帮助前端开发人员更加高效地管理和使用 SVG 图标。
安装 svgstore-cli
svgstore-cli 可以通过 NPM 安装，只需要运行以下命令即可：
npm install -g svgstore-cli
使用 svgstore-cli
将多个 SVG 文件合并
使用 svgstore-cli 将多个 SVG 文件合并为一个 SVG 文件非常简单，只需要在终端中进入 SVG 文件所在的目录，然后运行以下命令即可：
svgstore -o output.svg *.svg
这里的 -o 参数指定输出文件的名称，*.svg 指定需要合并的 SVG 文件名，可以使用通配符。
对 SVG 元素进行重命名和添加 class
svgstore-cli 还支持对 SVG 文件中的每个 SVG 元素进行重命名和添加 class，具体方法如下：
svgstore -o output.svg --rename-svg-ids --clean-defs --strip-defs --id-transform='s/my-svg/my-icon/' --class-transform='s/my-|icon(-|$)//g' *.svg
这里的 --id-transform 参数表示对 SVG 中的 id 进行重命名，将 my-svg 替换为 my-icon，--class-transform 参数表示添加 class 名称，并且将 my-svg 和 icon 名称都替换为空，这样就可以将 my-svg-icon 和 my-icon 这两个元素都添加 my-icon 这个 class 名称。
指定不同的类别名
如果不想在 svg 中添加任何预定义的 id 或 class，并且想指定不同的类别标识符，可以使用如下方法：
svgstore -o output.svg *.svg --symbol-dest='icon-%f'
这里的 --symbol-dest 参数指定每个 SVG 文件都将被添加前缀为 icon- 的 class 名称。这样在使用时只需使用 icon- 这个前缀就行了。
示例代码
以下是一个示例代码，它将两个 SVG 文件将整合在一起，重命名了它们的 id 并添加了一个 class：
svgstore -o output.svg --rename-svg-ids --clean-defs --strip-defs --id-transform='s/my-svg/my-icon/' --class-transform='s/my-|icon(-|$)//g' icon1.svg icon2.svg
这个例子中，icon1.svg 和 icon2.svg 文件被合并到了 output.svg 文件中，my-svg 这个 id 被重命名为 my-icon，并且添加了一个 class 名称。
总结
svgstore-cli 是一个非常实用的工具，可以帮助前端开发人员高效地管理和使用 SVG 图标。上面的教程仅仅是这个工具的基本用法，还有很多其他的功能可以通过查看文档了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/205198