@jts-studios/icons

Framework-agnostic SVG icon web component from JTS Studios.

Install

npm install @jts-studios/icons

Usage

import "@jts-studios/icons"

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

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

No CSS import required — styles are injected automatically.

Styling

Size the icon via CSS on the element. Stroke color inherits from currentColor by default:

jts-icon {
    width: 24px;
    color: red; /* controls stroke color */
}

How it works

All SVGs in src/icons/ are compiled into an inline SVG sprite at build time and bundled into the JS. On first use the sprite is injected into the DOM once. Each <jts-icon> renders a <svg><use> reference — zero HTTP requests, instant rendering.

Adding icons

Drop .svg files into src/icons/ and rebuild.

Build

npm run build

Publish

npm publish --access public