From npm install to a spinning, hovering icon takes three steps.
1. Install
pnpm add svelte-animated-icon(Or npm install / yarn add - see Installation.)
2. Import an icon
Open any .svelte file and import a single named component. Each icon is tree-shakeable, so importing Gear doesn’t drag in the other 1,499 icons.
<script>
import { Gear } from 'svelte-animated-icon/phosphor';
</script>
<Gear />At this point you already have a working icon - just static.
3. Pick a template
Add a template prop. Templates are the animation names baked into the library.
<Gear template="spin" />Hover the gear. It spins.
Try a few more
The same icon can wear very different personalities:
<Gear template="spin" size={24} />
<Gear template="draw" size={24} />
<Gear template="jelly" size={24} />
<Gear template="tada" size={24} />Browse the full list in the Templates Catalog.
Change when it fires
By default icons animate on hover. Switch to mount (fires once on load) or controlled (you drive it with state):
<Gear template="jelly" trigger="mount" />
<Gear template="draw" trigger="controlled" active={isOpen} />See Triggers for the full breakdown.