@icon-animation-engine/react

The primary React integration for the Icon Animation Engine. This package provides the high-fidelity Icon component with built-in support for 100+ animations and the advanced SVG Draw Engine.

🚀 Features

• Universal Component: One Icon component for Lucide, Heroicons, Raw SVGs, and more.
• SVG Draw Engine: Native support for stroke-draw animations with automatic path-length normalization.
• Smart Triggers: Built-in support for hover, click, loop, load, and entrance animations.
• Accessibility: Automatic ARIA management and prefers-reduced-motion compliance.

📦 Installation

npm install @icon-animation-engine/react @icon-animation-engine/animations

🛠️ Usage

Basic Setup

import { Icon } from "@icon-animation-engine/react";
import { Zap } from "lucide-react";
import "@icon-animation-engine/animations/dist/index.css";

function App() {
  return (
    <Icon 
      icon={Zap} 
      animation="hover:premium" 
      size={32} 
      color="#F59E0B" 
    />
  );
}

SVG Draw Animations

IAE automatically prepares your SVGs for drawing effects:

<Icon 
  icon={Zap} 
  animation="draw:energy-flow" 
  trigger="load" 
/>

Customization Props

| Prop | Type | Description | | :--- | :--- | :--- | | icon | any | The icon component or raw SVG string | | animation | string \| string[] | Animation token (e.g., hover:lift) | | duration | number | Custom duration in milliseconds | | intensity | 'low' \| 'medium' \| 'high' | Affects scale/translation distance | | trigger | AnimationTrigger | Override the default trigger |

built by zeshan amin