@jts-studios/icons

@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.