Svelte Animated Icons #

A collection of animated SVG icons for Svelte with enhanced customization, flexible event handling, and improved state management. Each icon supports sophisticated animation transitions, accessibility features, and granular control.

Features #

  • 🎨 Advanced customization (colors, sizes, stroke widths)
  • ✨ Draw transition animations
  • 🎯 Full TypeScript support
  • 🔄 Flexible event handling
  • ♿ Enhanced accessibility features
  • 🎮 Multiple animation trigger options

Installation #

Usage #

With Custom Properties

Props #

PropTypeDefaultDescription
sizenumber24Icon size in pixels
colorstringcurrentColorIcon color (any valid CSS color)
strokeWidth (flowbite/hero)number1.5/2.0Width of the icon strokes
event'hover'|'click'|'none''hover'Event that triggers the animation
pauseDurationnumber300 Duration of the animation (ms)
transitionParamsobjectduration: 500, delay: 0Svelte transition parameters
title{ id?: string, title?: string }-SVG title for accessibility
desc{ id?: string, desc?: string }-SVG description for accessibility
ariaLabelstringIcon-specificAria label for the icon

Types #

Accessibility Props Example #

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.