svghub

svghub keeps an icon set in one source tree and publishes it in three useful forms: typed JavaScript data, a native Web Component, and standalone SVG files. No browser request to an icon service is required.

The current package contains 16 social and bottom-navigation icons and has no runtime dependencies.

What the package exports

React, Vue, Svelte, and plain HTML can all consume the Web Component. React Native, LynxJS, and VS Code are intended pipeline targets, but version 0.1.4 does not publish native adapters for them.

Render a Web Component

import 'svghub/web';

<svghub-icon
  name="github"
  size="32"
  color="currentColor"
  stroke-width="1.5"
></svghub-icon>

Importing svghub/web registers the default element. Applications that need another tag name can import SvghubIconElement and register() directly.

The generated SVG inside the element is decorative and marked aria-hidden. When the icon carries meaning, give its surrounding button or link an accessible label.

Use typed icon data

import { getIcon, icons, type IconName } from 'svghub';

const github = getIcon('github');
const names = Object.keys(icons) as IconName[];

Each entry retains its name, category, viewBox, paths, and fill behavior. That makes the core suitable for a custom renderer without importing a framework component.

Use a standalone SVG

Every generated icon also ships under the svghub/svg/* export. Import or copy the file through the consuming build system rather than assuming a literal node_modules/... URL will be public in production.

One-source build pipeline

Contributors add an SVG beneath icons/<category>/ and run the icon build. The generator validates the viewBox, extracts paths and fill rules, then refreshes both the typed registry and published SVG directory before the ESM, CommonJS, and declaration builds run.

This keeps current consumers aligned while leaving room for future native renderers. The package requires Node.js 20 or newer and is MIT licensed.