lacspace-svg

Optimize & componentize SVGs — React/Vue/Svelte/Solid.

● Live · v0.2.0Try it live ▸npm ↗Source ↗

terminal

npx lacspace-svg logo.svg -o logo.min.svg

What it does

Everything, in one command

lacspace-svg bundles the SVG chores every frontend hits — optimization, framework conversion, inlining and spriting — into one small package with no dependency tree and no upload-your-art web service. A tolerant, hand-written XML/SVG parser underpins a pipeline of lossless optimizations (strip cruft, prune unused ids, round precision, normalize colours), a JSX/React converter with TypeScript and ref forwarding, URL/base64 data-URI encoding, and a sprite builder — all runnable from the CLI, in CI, or as a fully-typed dual ESM/CJS library.

Features

What's inside

Lossless optimizer

Strip comments/metadata/editor cruft, prune unused ids, round precision, normalize colours; reports bytes saved.

SVG → React/JSX

camelCase attrs, style-object, self-closing voids, TypeScript + forwardRef.

Data-URI encoder

URL-encoded (smaller) or base64, optional CSS background-image wrap.

Sprite builder

Combine many SVGs into one <symbol> sheet with a <use> usage snippet.

Safety inspector

Flags <script>, on* handlers and external hrefs without executing them.

Hand-written parser

Tolerant XML/SVG parse + serialize, round-trips real-world files.

Zero deps, offline

File/glob/stdin in, stdout/file out, CI-friendly non-zero exits.

Vue / Svelte / Solid

One toComponent dispatcher plus vue/svelte/solid CLI commands, alongside React.

currentColor injection

Swap literal fill/stroke for currentColor so icons inherit CSS color, with a keep-list.

Smarter optimizer

Drops default-valued presentation attrs, hoists shared attributes, strips Sketch/Illustrator cruft.

viewBox & dimension fixing

Derive a missing viewBox from width/height (and back), plus a dimensions() reader.

Batch stats

Optimize a whole folder and get per-file and total bytes saved, human or --json.

How to use

Copy, paste, done

Real commands and snippets — from a one-liner to the typed library.

Minify a logo

terminal

npx lacspace-svg logo.svg -o logo.min.svg

Reports before/after bytes and % saved.

Optimize a folder

terminal

npx lacspace-svg optimize "icons/*.svg" --out-dir dist --precision 2

Globs + per-file output.

SVG to a TS component

terminal

npx lacspace-svg jsx logo.svg --name Logo --ts --ref

Typed, ref-forwarding React component.

CSS data-URI

terminal

npx lacspace-svg data-uri icon.svg --css

background-image:url("…") ready to paste.

Sprite sheet

terminal

npx lacspace-svg sprite "icons/*.svg" -o sprite.svg

One symbol per file + usage snippet.

Inspect + audit

terminal

npx lacspace-svg info suspicious.svg

Counts, dimensions, script/handler warnings.

Vue 3 SFC

terminal

npx lacspace-svg vue logo.svg --name Logo --ts

Also svelte, solid, or component --framework <f>.

Inherit CSS color

terminal

npx lacspace-svg optimize "icons/*.svg" --current-color --keep-colors "#fff"

fill/stroke become currentColor; kept colours stay literal.

Batch + totals

terminal

npx lacspace-svg optimize "icons/*.svg" --precision 2

Prints per-file and a total bytes-saved summary.

Fix a missing viewBox

terminal

npx lacspace-svg optimize icon.svg --fix-dimensions

Derives viewBox from width/height and vice-versa.

Good for

What people build with it

✓ Shrink icon/asset SVGs in a build or CI step

✓ Generate React icon components from designer exports

✓ Inline SVGs into CSS/HTML as data-URIs

✓ Bundle an icon set into one sprite sheet

Start now

Run lacspace-svg today

Free, open-source, no API keys. It's a CLI and a typed library.

terminal

npx lacspace-svg logo.svg -o logo.min.svg

npm ↗Source ↗All tools →