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 #
Prop | Type | Default | Description |
---|---|---|---|
size | number | 24 | Icon size in pixels |
color | string | currentColor | Icon color (any valid CSS color) |
strokeWidth | number | 1,5 | Width of the icon strokes |
event | 'onmouseenter'|'onclick' | 'onmouseenter' | Event that triggers the animation |
pauseDuration | number | 300 | Duration of the animation (ms) |
transitionParams | object | duration: 800, delay: 0 | Svelte transition parameters |
title | object | - | SVG title for accessibility |
desc | object | - | SVG description for accessibility |
ariaLabel | string | - | 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.