SmartIcon
VERSION2.4.0
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 | 'currentColor' | Color applied to the icon container. SVGs that use `currentColor` will inherit it. If empty, the icon keeps its original fill. |
| offset | [number, number] | [0, 0] | Fixed offset from the pointer position. |
| anchor * | string | 'center' | Alignment (center, top-left, top-right, bottom-left, bottom-right). |
| followStrategy * | 'smooth' | 'raw' | 'smooth' | Whether the icon smoothly follows the pointer or snaps to it. |
| rotateWithVelocity * | boolean | false | Rotate the icon based on movement velocity. |