Svelte Animated Icons #

A collection of animated SVG icons for Svelte with customizable draw transitions, events, and accessibility features. Each icon supports hover/click animations, customizable colors, sizes, and stroke widths.

Features #

  • 🎨 Customizable colors, sizes, and stroke widths
  • ✨ Animated draw transitions on hover or click
  • ♿ Built-in accessibility features
  • 🎯 TypeScript support
  • 🔄 Configurable animation timing
  • 🎮 Multiple event trigger options

Installation #

pnpm i -D svelte-animated-icons

Usage #

<script>
  import { ArrowDownHero } from 'svelte-animated-icons';
</script>

<ArrowDownHero />

With Custom Properties

<script>
  import { ArrowDownHero } from 'svelte-animated-icons';
</script>

<ArrowDownHero
size={32}
color="#ff0000"
strokeWidth={2}
event="onclick"
pauseDuration={300}
transitionParams={{
    duration: 800,
    delay: 0
  }}
/>

Props #

PropTypeDefaultDescription
sizenumber24Icon size in pixels
colorstringcurrentColorIcon color (any valid CSS color)
strokeWidthnumber1,5Width of the icon strokes
event'onmouseenter'|'onclick''onmouseenter'Event that triggers the animation
pauseDurationnumber300 Duration of the animation (ms)
transitionParamsobjectduration: 800, delay: 0Svelte transition parameters
titleobject-SVG title for accessibility
descobject-SVG description for accessibility
ariaLabelstring-Aria label for the icon

Types #

import type { DrawParams } from 'svelte/transition';
import type { SVGAttributes } from 'svelte/elements';

type TitleType = {
id?: string;
title?: string;
};
type DescType = {
id?: string;
desc?: string;
};

interface Props extends SVGAttributes<SVGElement> {
pauseDuration?: number;
event?: 'onmouseenter' | 'onclick' | 'none';
title?: TitleType;
desc?: DescType;
ariaLabel?: string;
size?: number;
role?: string;
color?: string;
strokeWidth?: number;
transitionParams?: DrawParams;
}

Title and Description Props

<ArrowDown
title={{
    id: "ArrowDown-title",
    title: "ArrowDown Icon"
  }}
desc={{
    id: "ArrowDown-desc",
    desc: "A ArrowDown icon that animates on hover"
  }}
/>

Accessibility #

All icons include proper ARIA attributes and support custom titles and descriptions. They are keyboard accessible when used with click events.

Browser Support #

Works in all modern browsers that support SVG and CSS animations.

Contributing #

Contributions are welcome! Please read our contributing guidelines before submitting a pull request. Create a new icons in `src/lib/custom` directory.

License #

MIT License - see the LICENSE file for details.