简介
svgstore 是一个 NPM 包，它可以将多个 SVG 图标合并为一个单独的 SVG 文件。这个包非常适合前端开发人员使用，因为它可以减少 HTTP 请求次数，提高网站或应用程序的性能。
安装
首先，我们需要在命令行中全局安装 svgstore：
npm install -g svgstore
接着，在项目中安装 svgstore 作为依赖项：
npm install svgstore --save-dev
使用
基本用法
要使用 svgstore，我们需要创建一个包含 SVG 文件路径的数组，并将其传递给 svgstore() 函数。例如，我们有三个 SVG 文件存储在 assets/icons/ 目录下，文件名分别是 icon1.svg、icon2.svg 和 icon3.svg，那么我们可以这样使用 svgstore：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- -- - -------------- ----- ----- - - ------------------------- ------------------------- ------------------------ -- ----- ------ - ---------- ------- ---- --- ------------------ -- - ----- ---- - --------------------- - --------- ------ --- ----- -- - ------------------------ ------------------- ---- -------------- ------ --- ------------------------------------- -------------------展开代码
该示例代码将创建一个名为 assets/sprite.svg 的文件，其中包含三个 SVG 图标。
高级用法
在上面的示例中，我们使用 fs 模块读取每个 SVG 文件并将其添加到 sprite 中。但是，如果你有很多 SVG 文件，这种方法可能会变得麻烦。幸运的是，svgstore 还提供了另一种高级用法，它可以自动读取目录中的所有 SVG 文件并将它们添加到 sprite 中。
例如，假设我们有一个名为 icons 的目录，其中包含许多 SVG 文件。我们可以按如下方式使用 svgstore 将它们合并到一个单独的 SVG 文件中：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- -- - -------------- ----- ------ - ---------- ------- ----- ------------ - ------ ------ - --- -------------------------- ----- ------ -- - -- ----- - ------------------- ------- - ------------------ -- - ----- -- - ----------------------- ---- -------------- --------------- --- ------------------------------------- ------------------- ---展开代码
在这个示例中，我们使用了 svgstore 的 load() 方法来自动读取所有 SVG 文件，并将它们添加到 sprite 中。此外，我们还定义了一个 symbolAttrs 对象，它将应用于所有生成的 <symbol> 元素。
结论
使用 svgstore，我们可以轻松地将多个 SVG 图标合并到一个单独的 SVG 文件中，从而减少 HTTP 请求次数并提高网站或应用程序的性能。此外，svgstore 还提供了许多高级用法，使开发人员可以更轻松地管理和处理大量 SVG 图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54391
