npm package: @lui-craft/luicon
Description: Smart, customizable, developer-first icon system for React
Author: Nittanando Sarkar
Latest version: 1.0.11

# luIcon

Smart, customizable, developer-first icon system for React 18+ applications.

[![npm version](https://img.shields.io/npm/v/luicon)](https://www.npmjs.com/package/luicon)
[![npm downloads](https://img.shields.io/npm/dm/luicon)](https://www.npmjs.com/package/luicon)
[![License](https://img.shields.io/npm/l/luicon)](https://opensource.org/licenses/MIT)

## Features

- **Tree-shakeable** - Import only the icons you need
- **Smart Icons** - Dynamic icons with props (battery, wifi, volume, signal)
- **Animation Support** - Built-in spin, pulse, ring, and bounce animations
- **Theme Support** - Automatic dark/light mode detection
- **TypeScript** - Full type definitions included
- **Tailwind-friendly** - Works seamlessly with Tailwind CSS

## Installation

```bash
npm install luicon
```

## Usage

### Basic Usage

```tsx
import { LuHome, LuSearch, LuHeart } from 'luicon';

function App() {
  return (
    <div>
      <LuHome size={24} />
      <LuSearch size={20} color="#6366f1" />
      <LuHeart />
    </div>
  );
}
```

### Smart Icons

Smart icons accept dynamic props for real-time state:

```tsx
import { LuBattery, LuWifi, LuVolume, LuSignal } from 'luicon';

function StatusBar() {
  return (
    <div>
      <LuBattery level={80} />
      <LuWifi strength={3} />
      <LuVolume volume={2} />
      <LuSignal signal={4} />
    </div>
  );
}
```

### Animations

Add built-in animations:

```tsx
import { LuRefresh, LuBell, LuLoader } from 'luicon';

function LoadingExample() {
  return (
    <div>
      <LuRefresh animate="spin" />
      <LuBell animate="pulse" />
      <LuLoader animate="ring" />
    </div>
  );
}
```

### With LuIconProvider

```tsx
import { LuIconProvider } from 'luicon';

function App() {
  return (
    <LuIconProvider
      config={{
        strokeWidth: 1.5,
        defaultVariant: 'outline',
        theme: 'auto',
      }}
    >
      <YourApp />
    </LuIconProvider>
  );
}
```

### Custom Props

All icons accept these props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | number \| string | 24 | Icon size |
| color | string | currentColor | Icon color |
| strokeWidth | number | 2 | Stroke width |
| className | string | - | Additional CSS classes |
| animate | 'spin' \| 'pulse' \| 'ring' \| 'bounce' | - | Animation type |
| variant | 'outline' \| 'filled' \| 'duotone' | outline | Icon variant |

## Available Icons

### Navigation
- LuHome, LuMenu, LuChevronLeft, LuChevronRight, LuArrowLeft

### Actions
- LuSearch, LuPlus, LuX, LuCheck, LuTrash

### Communication
- LuMail, LuBell, LuPhone, LuMessage

### User
- LuUser, LuUsers, LuUserPlus

### Media
- LuImage, LuPlay, LuPause

### Smart Icons
- LuBattery (level prop), LuWifi (strength prop), LuVolume (volume prop), LuSignal (signal prop)

### UI Elements
- LuSettings, LuHeart, LuStar, LuEye, LuEyeOff

### Files
- LuFolder

## Tree-shaking

Import icons individually for optimal tree-shaking:

```tsx
// ✅ Good - only imports LuHome
import { LuHome } from 'luicon';

// ❌ Bad - imports all icons
import * as Icons from 'luicon';
```

## License

MIT License - see [LICENSE](LICENSE) for details.