# 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 ```bash pnpm i -D svelte-animated-icons ``` ## Usage ```svelte <script> import { ArrowDown } from 'svelte-animated-icons'; </script> <ArrowDown /> ``` ### With Custom Properties ```svelte <script> import { ArrowDown } from 'svelte-animated-icons'; </script> <ArrowDown 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 | Pause duration between animations (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 | ### Title and Description Props ```svelte <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. ## Development ### Setup ```bash git clone git@github.com:shinokada/svelte-animated-icons.git cd svelte-animated-icons pnpm install ``` ### Running Tests ```bash pnpm test:e2e pnpm test ``` ### Building ```bash pnpm build ``` ## Contributing Contributions are welcome! Please read our contributing guidelines before submitting a pull request. ## License MIT License - see the [LICENSE](LICENSE) file for details.