Core Exports and Types

Everything reachable from the package root (svelte-animated-icon).

Component

import { AnimatedIcon } from 'svelte-animated-icon';

The shared animation engine. See AnimatedIcon for the full prop table.

import type { AnimatedIconProps } from 'svelte-animated-icon';

The Props interface from the component’s <script module> block, re-exported as AnimatedIconProps.

Templates

import { TEMPLATES, TEMPLATE_IDS, getTemplate } from 'svelte-animated-icon';

TEMPLATES: IconTemplate[]

The full ordered list of template records. Each entry is:

interface IconTemplate {
  id: string;
  label: string;
  /** Which weight this suits. Omit = works on both. 'line' needs a stroke; 'fill' suits solid shapes. */
  for?: 'line' | 'fill';
  run: (svg: SVGSVGElement) => Animation[];
}

TEMPLATE_IDS: string[]

A flat array of every id in TEMPLATES, in the same order. Convenient for <select>-based template pickers - see Templates Catalog for an example.

getTemplate(id: string): IconTemplate

Look up a template by id. Returns the record or undefined if no template matches.

import { getTemplate } from 'svelte-animated-icon';

const t = getTemplate('spin');
t?.run(svgEl); // → Animation[]

Use this when you want to drive a template directly without the component - for example, to animate a non-icon SVG inside a larger animation system.

Reset helper

import { clearProps } from 'svelte-animated-icon';

clearProps(svg: SVGSVGElement): void strips the inline styles a template set (stroke-dasharray, stroke-dashoffset, opacity, transform, transform-box, transform-origin, fill, fill-opacity) plus the pathLength attribute, returning the icon to its rest state. The component calls it for you inside stopAnimation(); reach for it directly only when you’re driving templates yourself.

Types

import type { IconTemplate } from 'svelte-animated-icon';

The shape of a template record - see TEMPLATES above.

What’s not exported

• Per-icon components - those live behind the library subpaths. Import Gear from svelte-animated-icon/phosphor, never from the root.
• startAnimation / stopAnimation - those are component instance methods. Reach them via bind:this. See Imperative Control.
• WAAPI patches - loop, speed, and easing overrides happen inside the component. If you want that level of control, call getTemplate(id).run(svg) yourself and manage the resulting Animation[].

Entry point map

See Tree Shaking for how the bundler uses this map to keep your output small.