API
| Function | Does |
|---|
registerIcons(defs) | Adds { name: strokes }. Later calls override earlier ones. |
drawIcon(svg, name) | Draws at once. Returns false for an unknown name. |
morphIcon(svg, name, options) | Morphs from what is on screen, including a morph in progress. Returns a promise that settles when it ends or is interrupted. |
scrubIcon(svg, from, to, t) | Shows the icon at a fixed point between two icons (t 0 to 1), no animation. Drive it from a slider, scroll or a gesture. |
initIcons(root) | Draws every svg[data-icon] under root. |
toggleIcon(button) | Swaps a toggle button's icon; returns true while the toggle icon shows. |
hasIcon(name), listIcons(), motions | Look up registered icons and the spring preset names. |
Components
| Import | Components |
|---|
dt-icon/react | DtIcon, DtIconMorph |
dt-icon/vue | DtIcon, DtIconMorph |
dt-icon/svelte/DtIcon.svelte, .../DtIconMorph.svelte | Svelte 5 components |
dt-icon/element | <dt-icon>, <dt-icon-morph> custom elements: Angular, HTML, Astro, any template language |
DtIcon props: name, size, stroke, label, motion, speed. DtIconMorph props: from, to, active, animation, speed, progress, size, stroke, label.
morphIcon options
| Option | Default | Does |
|---|
motion | 'smooth' | 'smooth', 'snappy', 'bouncy', or { stiffness, damping, mass } for a custom spring. |
speed | 1 | Playback rate: 0.5 is half speed, 2 is twice as fast. |
duration, easing | none | Setting either replaces the spring with a plain tween (milliseconds, t => t). |
onProgress | none | Called every frame with the progress; springs may pass 1 on the way (bouncy overshoots) and it ends on exactly 1. |
With prefers-reduced-motion: reduce, morphIcon changes the icon instantly. Icons are strokes on a 24x24 grid; size and weight come from --dt-icon-size and --dt-icon-stroke.
