@jts-studios/icons

Framework-agnostic SVG icon web component from JTS Studios.
All icons are compiled into an inline SVG sprite at build time — zero HTTP requests, instant rendering.

Installation

npm install @jts-studios/icons

Usage

Import once anywhere in your app entry point:

import "@jts-studios/icons"

Then use <jts-icon> anywhere in your HTML:

<jts-icon icon="chevron-down"></jts-icon>

No CSS import required — styles are injected automatically.

Styling

Control size and color via CSS:

jts-icon {
    width: 24px;
    color: currentColor; /* stroke or fill color */
}

Use stroke mode by default, or set the filled attribute for filled icons:

<jts-icon icon="moon"></jts-icon>
<jts-icon icon="moon" filled></jts-icon>

Available Icons

| Name | Usage | |---|---| | book-open | <jts-icon icon="book-open"> | | chevron-down | <jts-icon icon="chevron-down"> | | chevron-left | <jts-icon icon="chevron-left"> | | chevron-right | <jts-icon icon="chevron-right"> | | chevron-up | <jts-icon icon="chevron-up"> | | copy | <jts-icon icon="copy"> | | moon | <jts-icon icon="moon"> | | sun | <jts-icon icon="sun"> |

Adding Icons

Drop any .svg file into src/icons/ and run npm run build. The icon is automatically picked up by the sprite compiler — no registration needed.

Scripts

| Command | Description | |---|---| | npm run build | Build the library | | npm run clean | Remove dist/ | | npm run release | Bump patch version and publish | | npm run release:minor | Bump minor version and publish | | npm run release:major | Bump major version and publish |

How It Works

1. At build time, all .svg files in src/icons/ are compiled into a single <svg><defs><symbol>… sprite string and bundled into the JS output. Each SVG is passed through SVGO (path compression, shape normalisation, numeric cleanup) before being written to the sprite.
2. Shared presentation attributes (fill, stroke, stroke-linecap, stroke-linejoin, stroke-width) are moved to CSS rather than repeated on every symbol, shrinking the sprite by ~70–80 bytes per icon.
3. On first use, the sprite is injected once into document.body via DOMParser — preserving SVG namespaces without a throwaway wrapper element.
4. Styles are injected via the Constructable StyleSheets API (CSSStyleSheet.replaceSync + document.adoptedStyleSheets) where supported, falling back to a <style> tag. This avoids HTML parsing overhead and lets the stylesheet be shared across shadow roots.
5. Each <jts-icon> element builds its <svg><use> structure once with createElementNS (no innerHTML). Subsequent icon changes patch only the href attribute — no DOM nodes are recreated.
6. CSS contain: layout style isolates each icon's layout and style recalculations from the rest of the page.

Performance vs Lucide Icons

| Metric | Lucide | @jts-studios/icons | |---|---|---| | DOM nodes per icon | Full SVG tree per usage | 1 <use> reference — paths live once in sprite | | Same icon × 10 | 10× full SVG trees in DOM | 10× <use> — zero extra path nodes | | Re-render cost | Recreates full SVG DOM | Patches a single href attribute | | Style injection | Inline attributes on every element | One Constructable StyleSheet shared by all | | Sprite injection | N/A | DOMParser — no throwaway element | | Path data | Raw SVG source | SVGO-compressed at build time | | Layout isolation | None | contain: layout style per icon |

© 2026 JTS Studios. All Rights Reserved.