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 #

pnpm i -D svelte-animated-icons

Usage #

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

<AddColumnAfterFlowbite />

With Custom Properties

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

<AddColumnAfterFlowbite
  size={32}
  color="#ff0000"
  strokeWidth={2}
  event="click"
  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 (flowbite/hero)	number	1.5/2.0	Width of the icon strokes
event	'hover'\|'click'\|'none'	'hover'	Event that triggers the animation
pauseDuration	number	300	Duration of the animation (ms)
transitionParams	object	duration: 500, delay: 0	Svelte transition parameters
title	{ id?: string, title?: string }	-	SVG title for accessibility
desc	{ id?: string, desc?: string }	-	SVG description for accessibility
ariaLabel	string	Icon-specific	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<SVGSVGElement> {
    pauseDuration?: number;
    event?: 'hover' | 'click' | 'none';
    title?: TitleType;
    desc?: DescType;
    ariaLabel?: string;
    size?: number;
    color?: string;
    strokeWidth?: number; // flowbite/hero
    transitionParams?: DrawParams;
  }

Accessibility Props Example #

<AddColumnAfterFlowbite
  title={{
    id: 'add-column-title',
    title: 'Add Column Icon'
  }}
  desc={{
    id: 'add-column-desc',
    desc: 'An icon to add a column with animated transition'
  }}
/>

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.