Svelte 5 · pulsoicon-svelte
PulsoIcon for Svelte
Every demo on this page is a Svelte 5 component rendered by Svelte, with the icons from pulsoicon-svelte. They draw exactly the same SVG as the React package and move the same way.
Install
npm install pulsoicon-svelteSvelte 5. Motion (12 or newer), which plays the icons, is installed with it.
Quick start
<script lang="ts">
import { Bell, Calendar, Trash2 } from "pulsoicon-svelte";
</script>
<button><Bell size={20} /> Notifications</button>
<button><Calendar /> Schedule</button>
<button><Trash2 color="crimson" strokeWidth={1.5} /> Delete</button>class, style and any other attribute go on the <svg>.
Live demos
Animated and static, outline and solid
<Heart /><Heart solid /><Heart animated={false} /><Heart solid animated={false} />Hover a figure to play it. The static ones don't move.
Click to play: bind:this
Not saved yet
Driven by state: play
Props, live
<Heart size={48} color="#f2552c" />Play from code
<script lang="ts">
import { Check } from "pulsoicon-svelte";
let check: ReturnType<typeof Check>;
</script>
<button onclick={() => check.startAnimation()}>
<Check bind:this={check} autoAnimated={false} /> Save
</button>startAnimation() and stopAnimation() both return a promise that resolves when the motion has finished. Or bind state: <Bell autoAnimated={false} play={hasUnread} />.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
size | number | string | 24 | Width and height; numbers are pixels |
color | string | currentColor | Stroke colour, and fill colour when solid |
strokeWidth | number | string | 2 | Stroke width on the 24-unit grid |
absoluteStrokeWidth | boolean | false | Keep the stroke the same number of pixels at any size |
solid | boolean | false | The filled drawing instead of the outline |
animated | boolean | true | false makes the icon completely still: nothing plays it, not bind:this and not play |
autoAnimated | boolean | true | Play on hover / focus of the closest button, link, label or tab. false turns that off; bind:this and play still work |
play | boolean | — | true plays the motion, false returns to rest |