Icon

The inline SVG icon set.

A small, token-sized SVG icon set. Built-in stroke glyphs are drawn from a `name` map; register your own with `registerIcon`, or pass raw `paths` inline. Decorative by default; pass a `title` to expose an accessible name. Supports `spin`, quarter-turn `rotate`, `flip`, an `outline`/`solid` `variant`, and configurable stroke.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Icon, registerIcon } from 'dssoca';

  registerIcon('heart', '<path d="M12 21 4 13a5 5 0 0 1 7-7l1 1 1-1a5 5 0 0 1 7 7z"/>');
</script>

<Icon name="activity" />
<Icon name="settings" title="Settings" />
<Icon name="spinner" spin />
<Icon name="check" variant="solid" />
<Icon name="github" title="GitHub" />
<Icon name="language" />

Built-in glyphs: `grid`, `activity`, `database`, `logs`, `terminal`, `settings`, `user`, `arrow`, `chevron`, `external`, `film`, `note`, `book`, `check`, `cup`, `wallet`, `target`, `spinner`, `home`, `briefcase`, `folder`, `github`, `linkedin`, `language`, `color-swatch`, `search` (see the Gallery story). The `chevron` glyph has a bounding box centred (horizontally and vertically) on the 24×24 viewBox so a 180° rotation pivots about its visual centre without shifting (used by Accordion). Module exports `registerIcon(name, paths)` (re-exported from `dssoca`) to register or override a glyph globally at runtime, and the `IconName` / `IconSize` types. **House rule:** every component-drawn icon renders through this shared `Icon` component — no bespoke CSS-border shapes or ad-hoc inline `<svg>`; an *interactive* icon must sit inside a real control (a native `<button>` preferred) with the accessible name on the control and the icon marked `aria-hidden`. (Two deliberate non-icons: the Button loading indicator is a `Spinner`, and the Badge status dot is a styled span.)

HTML

interactive with vanilla.js The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css+ dssoca/vanilla.js — see Plain HTML & CSS.

html

!-- with vanilla.js: -->
<span data-ss-icon="check" data-size="sm"></span>
!-- rendered: -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" class="ss-icon" data-size-variant="sm" style="width:16px;height:16px" aria-hidden="true" focusable="false">
  <path d="M5 12l4 4L19 6"/>
</svg>

Write <span data-ss-icon="check" data-size="sm"></span> and vanilla.js swaps it for this exact SVG (or paste the SVG for a no-JS page).

Props

Prop	Type	Default	Description
`name`	`IconName`	—	Required. Which glyph to render (e.g. grid, activity, terminal). Falls back to `paths` when unknown.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	—	Icon-local fixed size scale — xs 12px / sm 16px / md 20px / lg 24px. `xs` is Icon-only (no global size-variant equivalent). When unset, inherits the active `--ss-icon` token (16/20/24 across sm/md/lg).
`px`	`number`	—	Explicit pixel size; overrides the size scale.
`paths`	`string`	—	Raw SVG inner markup escape hatch — rendered when `name` is not a known/registered glyph.
`title`	`string`	—	Accessible name; rendered as a real <title> and wired via aria-labelledby (implies non-decorative).
`desc`	`string`	—	Extended description; rendered as <desc> and appended to aria-labelledby.
`decorative`	`boolean`	—	Force aria-hidden with no a11y name. Defaults true when no `title`, false when a `title` is present.
`spin`	`boolean`	`false`	Spin the glyph (e.g. a loader). Honours prefers-reduced-motion.
`rotate`	`0 \| 90 \| 180 \| 270`	`0`	Quarter-turn rotation.
`flip`	`'horizontal' \| 'vertical'`	—	Mirror the glyph.
`variant`	`'outline' \| 'solid'`	`'outline'`	Stroked (outline) or filled with currentColor (solid).
`strokeWidth`	`number`	`2`	Stroke weight in viewBox units.
`absoluteStroke`	`boolean`	`false`	Keep `strokeWidth` optically constant across sizes (recompute from resolved px).
`class`	`string`	`''`	Extra class on the root svg.