https://github.com/ztrehagem/svg-bundler
Generating SVG sprite.
https://github.com/ztrehagem/svg-bundler
npm-package svg svg-sprite svg-sprites
Last synced: 5 months ago
JSON representation
Generating SVG sprite.
- Host: GitHub
- URL: https://github.com/ztrehagem/svg-bundler
- Owner: ztrehagem
- License: unlicense
- Created: 2021-04-16T06:21:04.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-09T05:27:31.000Z (over 1 year ago)
- Last Synced: 2025-06-16T06:03:12.659Z (5 months ago)
- Topics: npm-package, svg, svg-sprite, svg-sprites
- Language: TypeScript
- Homepage:
- Size: 199 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @ztrehagem/svg-bundler
[](https://www.npmjs.com/package/@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 `` with `id` attribute, and bundled into single ``.
Furthermore, a manifest JSON is generated that has `id`, `width`, `height`, and `viewBox` attributes of each SVG.
Normally the parent of `` is a ``, the manifest is useful for applying their attributes to the ``.
This library won't optimize SVGs like SVGO, just bundle.
## Installation
```sh
npm install @ztrehagem/svg-bundler
```
## Usage (CLI)
Note: Node.js >= 20.0.0 is required to use CLI.
```sh
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)
```ts
import { SvgBundler } from "@ztrehagem/svg-bundler";
const bundler = new SvgBundler();
bundler.add(
"foo",
'...',
);
const { bundled, manifest } = await bundler.bundle();
console.log(bundled);
//
//
// ...
//
//
console.log(manifest);
// {
// foo: {
// width: "24px",
// height: "24px",
// viewBox: "0 0 24 24"
// }
// }
```