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 #

• 🚀 1164 icons
• 🎨 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 #

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;
  focusable?: 'true' | 'false' | 'auto';
}

Accessibility #

Decorative Icons #

By default, icons have no aria-label. This is intentional - when icons are used next to text or as decorative elements, they don't need labels as screen readers will ignore them.

<button>
  <AddColumnAfterFlowbite />Add column
</button>
<!-- Screen reader reads: "Add column button" -->

Standalone Icons #

When icons are used without accompanying text (e.g., icon-only buttons), you should provide an accessible label using the ariaLabel prop:

<button>
  <AddColumnAfterFlowbite ariaLabel="Add column after" />
</button>
<!-- Screen reader reads: "Add column after button" -->

Rich Descriptions #

For complex icons that need detailed descriptions, use title and desc props. The title provides a short label, while desc offers a longer description:

<AddColumnAfterFlowbite
  title={{ id: 'my-title', title: 'Add column icon' }}
  desc={{ id: 'my-descrip', desc: 'The shape of plus on the right.' }}
  color="red"
/>

Note: When using title, you don't need ariaLabel as the title will be used automatically via aria-labelledby.

Focusable #

Icons are not keyboard-focusable by default (focusable="false"). If you need to change this behavior, use the focusable prop:

<AddColumnAfterFlowbite focusable="true" />

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.