React Animated Icons

A high-performance, studio-quality animated React icon and component library built with Framer Motion. Designed for premium UI experiences with smooth micro-interactions and easy customization.

✨ Beautiful animations | 🚀 Optimized for performance | 💎 Easy integration

🚀 Installation

Install the package and its peer dependency framer-motion:

npm install react-animated-icons-miraj framer-motion

🛠 Usage

Simply import the animated icons and buttons and drop them into your React component.

🔔 Animated Icons

import { Bell, Star } from 'react-animated-icons-miraj';

function App() {
  return (
    <div className="flex gap-4">
      {/* Customized Icon Usage */}
      <Bell 
        size={100} 
        color="#6366f1" 
        animation="spin" 
        speed={2} 
        intensity={20} 
      />
      <Star size={80} color="gold" animation="pulse" />
    </div>
  );
}

🔘 Animated Buttons

import { AnimatedButton } from 'react-animated-icons-miraj';

function App() {
  return (
    <div className="p-10">
      <AnimatedButton 
        variant="primary" 
        size="lg"
        onClick={() => alert('Clicked!')}
      >
        Click Me ✨
      </AnimatedButton>
    </div>
  );
}

🎨 Documentation

Every icon supports the following props:

| Prop | Type | Description | | :--- | :--- | :--- | | size | number | Width/Height in pixels. | | color | string | Fill/Stroke color (e.g., "#6366f1"). | | animation | string | "ring", "spin", "bounce", "pulse", "sparkle". | | speed | number | Cycle duration in seconds. |

AnimatedButton props:

| Prop | Type | Description | | :--- | :--- | :--- | | variant | string | "primary", "secondary", "outline", "ghost". | | size | string | "sm", "md", "lg". |

💻 Demo & Local Preview

To test more icons and interactions locally:

1. Clone this repository.
2. Run npm install and npm run dev.
3. Open http://localhost:5173.

📄 License

MIT © Miraj