@ztrehagem/svg-bundler

Generating SVG sprite. Bundle SVGs into a single SVG as a collection of symbols, and generate manifest.

Features

Specified SVG files or strings are converted into <symbol> with id attribute, and bundled into single <svg>. Furthermore, a manifest JSON is generated that has id, width, height, and viewBox attributes of each SVG. Normally the parent of <use> is a <svg>, the manifest is useful for applying their attributes to the <svg>.

This library won't optimize SVGs like SVGO, just bundle.

Installation

npm install @ztrehagem/svg-bundler

Usage (CLI)

Note: Node.js >= 20.0.0 is required to use CLI.

npx @ztrehagem/svg-bundler --srcDir=./path/to/srcDir --outDir=./path/to/outDir

| Argument | Type | Required | Default | Description | | -------------------- | ------ | -------- | ----------------- | ------------------------------------------------- | | --srcDir | string | ✅ | | Path to the directory that includes ".svg" files. | | --outDir | string | ✅ | | Path to the output directory. | | --spriteFilename | string | | "sprite.svg" | Filename of the SVG sprite file. | | --manifestFilename | string | | "manifest.json" | Filename of the manifest file. |

Usage (JS API)

import { SvgBundler } from "@ztrehagem/svg-bundler";

const bundler = new SvgBundler();

bundler.add(
  "foo",
  '<svg width="24px" height="24px" viewBox="0 0 24 24">...</svg>',
);

const { bundled, manifest } = await bundler.bundle();

console.log(bundled);
// <svg width="0" height="0" style="display:none;">
//   <symbol id="foo" width="24px" height="24px" viewBox="0 0 24 24">
//   ...
//   </symbol>
// </svg>

console.log(manifest);
// {
//   foo: {
//     width: "24px",
//     height: "24px",
//     viewBox: "0 0 24 24"
//   }
// }