SmartIcon
VERSION2.3.1
LICENSEMIT
CONFIG11 Options
Advanced state machine that morphs SVGs based on semantic context.
Installation
pnpm add @supermousejs/labsUsage
import { SmartIcon } from '@supermousejs/labs';
app.use(SmartIcon({ icons: { ... } }));Configuration
* Reactive Property| Option | Type | Default | Description |
|---|---|---|---|
| icons | Record<string, string> | {} | Map of state names to SVG strings. |
| defaultState | string | 'default' | Initial semantic state used before any hover interaction resolves. |
| useSemanticTags | boolean | true | Resolve smart states from semantic HTML tags such as links and buttons. |
| transitionDuration | number | 200 | Morph transition time in ms. |
| switchDelay | number | 80 | Minimum ms a state must be requested before committing to the next icon. |
| size * | number | 24 | Size of the icon container. |
| color * | string | 'black' | Icon fill color (currentColor). |
| offset | [number, number] | [0, 0] | Fixed offset. |
| anchor * | string | 'center' | Alignment (center, top-left, etc). |
| followStrategy * | 'smooth' | 'raw' | 'smooth' | Whether the icon should smoothly follow the pointer or snap to it. |
| rotateWithVelocity * | boolean | false | Rotate the icon based on movement velocity. |