Svelte

Try every example live on the Svelte demo page.

Installation

npm install pulsoicon-svelte

Svelte 5. Motion 12 or newer plays the icons and is installed with the package.

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>

Props

size (24), color (currentColor), strokeWidth (2), absoluteStrokeWidth (false), solid (false), animated (true), autoAnimated (true) and play, as in React. Any other attribute (class, style, aria-label) goes on the <svg>.

Outline, solid and static

<Heart />
<Heart solid />
<Heart animated={false} />
<Heart solid animated={false} />

Play from code

bind:this gives startAnimation() and stopAnimation(); both return a promise that resolves when the motion has finished.

<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>

Driven by state

<Bell autoAnimated={false} play={hasNewMessage} />

Loading icons on demand

pulsoicon-svelte/all exports every icon by kebab-case name (all of them). pulsoicon-svelte/names lists the names without loading any icon, and pulsoicon-svelte/icons/<name> loads one:

import { ICON_NAMES, type IconName } from "pulsoicon-svelte/names";

const load = (name: IconName) => import(`pulsoicon-svelte/icons/${name}`);

Accessibility

Icons render with aria-hidden="true"; label the button or link they sit in. Nothing moves when the system asks for reduced motion.