# @nice2dev/icons-media

React icon library for media, entertainment, creative, and multimedia applications.

## Installation

```bash
pnpm add @nice2dev/icons-media
```

## Features

- 🎬 **60 Media Icons** — Video, Audio, Creative, Entertainment
- 🎨 **Variants** — Filled, Outlined, Duotone styles
- ✨ **Animations** — 9 SMIL-based animations (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
- 📦 **Tree-shakeable** — Import only what you need
- 🔷 **TypeScript** — Full type definitions
- ⚛️ **React 19** — Latest React support

## Usage

```tsx
import { PlayIcon, MusicIcon, CameraIcon, StarIcon } from '@nice2dev/icons-media';

function App() {
  return (
    <div>
      <PlayIcon size={24} color="#22c55e" />
      <MusicIcon variant="filled" accentColor="#8b5cf6" />
      <CameraIcon animation="pulse" />
      <StarIcon size={32} accentColor="#fbbf24" />
    </div>
  );
}
```

## Available Icons

### Video (15 icons)

| Icon               | Component              |
| ------------------ | ---------------------- |
| Play               | `PlayIcon`             |
| Pause              | `PauseIcon`            |
| Stop               | `StopIcon`             |
| Fast Forward       | `FastForwardIcon`      |
| Rewind             | `RewindIcon`           |
| Skip Next          | `SkipNextIcon`         |
| Skip Previous      | `SkipPreviousIcon`     |
| Record             | `RecordIcon`           |
| Video              | `VideoIcon`            |
| Video Off          | `VideoOffIcon`         |
| Screen             | `ScreenIcon`           |
| Fullscreen         | `FullscreenIcon`       |
| Picture in Picture | `PictureInPictureIcon` |
| Captions           | `CaptionsIcon`         |
| Replay             | `ReplayIcon`           |

### Audio (15 icons)

| Icon           | Component           |
| -------------- | ------------------- |
| Music          | `MusicIcon`         |
| Music Note     | `MusicNoteIcon`     |
| Headphones     | `HeadphonesIcon`    |
| Speaker        | `SpeakerIcon`       |
| Speaker Mute   | `SpeakerMuteIcon`   |
| Volume Up      | `VolumeUpIcon`      |
| Volume Down    | `VolumeDownIcon`    |
| Volume Mute    | `VolumeMuteIcon`    |
| Microphone     | `MicrophoneIcon`    |
| Microphone Off | `MicrophoneOffIcon` |
| Podcast        | `PodcastIcon`       |
| Radio          | `RadioIcon`         |
| Equalizer      | `EqualizerIcon`     |
| Playlist       | `PlaylistIcon`      |
| Shuffle        | `ShuffleIcon`       |

### Creative (15 icons)

| Icon         | Component          |
| ------------ | ------------------ |
| Camera       | `CameraIcon`       |
| Camera Off   | `CameraOffIcon`    |
| Image        | `ImageIcon`        |
| Gallery      | `GalleryIcon`      |
| Film         | `FilmIcon`         |
| Filmstrip    | `FilmstripIcon`    |
| Clapperboard | `ClapperboardIcon` |
| Director     | `DirectorIcon`     |
| Palette      | `PaletteIcon`      |
| Brush        | `BrushIcon`        |
| Pen          | `PenIcon`          |
| Pencil       | `PencilIcon`       |
| Eraser       | `EraserIcon`       |
| Color Picker | `ColorPickerIcon`  |
| Layers       | `LayersIcon`       |

### Entertainment (15 icons)

| Icon      | Component       |
| --------- | --------------- |
| Gamepad   | `GamepadIcon`   |
| Joystick  | `JoystickIcon`  |
| Trophy    | `TrophyIcon`    |
| Medal     | `MedalIcon`     |
| Star      | `StarIcon`      |
| Heart     | `HeartIcon`     |
| Ticket    | `TicketIcon`    |
| Theater   | `TheaterIcon`   |
| Popcorn   | `PopcornIcon`   |
| TV        | `TVIcon`        |
| Stream    | `StreamIcon`    |
| Live      | `LiveIcon`      |
| Broadcast | `BroadcastIcon` |
| Antenna   | `AntennaIcon`   |
| Satellite | `SatelliteIcon` |

## Props

| Prop          | Type                                  | Default          | Description             |
| ------------- | ------------------------------------- | ---------------- | ----------------------- |
| `size`        | `number`                              | `24`             | Icon size in pixels     |
| `color`       | `string`                              | `'currentColor'` | Primary icon color      |
| `accentColor` | `string`                              | —                | Secondary/accent color  |
| `variant`     | `'filled' \| 'outlined' \| 'duotone'` | `'outlined'`     | Icon style variant      |
| `animation`   | `MediaIconAnimation`                  | —                | Animation type          |
| `className`   | `string`                              | —                | CSS class name          |
| `style`       | `CSSProperties`                       | —                | Inline styles           |
| `...props`    | `SVGProps`                            | —                | Any valid SVG attribute |

## Animations

```tsx
import { PlayIcon } from '@nice2dev/icons-media';

// Available animations
<PlayIcon animation="pulse" />   // Opacity pulse
<PlayIcon animation="grow" />    // Scale grow
<PlayIcon animation="shake" />   // Horizontal shake
<PlayIcon animation="spin" />    // 360° rotation
<PlayIcon animation="bounce" />  // Vertical bounce
<PlayIcon animation="fade" />    // Fade in/out
<PlayIcon animation="flip" />    // Y-axis flip
<PlayIcon animation="slide" />   // Horizontal slide
<PlayIcon animation="glow" />    // Glow effect
```

## Icon Collections

```tsx
import { videoIcons, audioIcons, creativeIcons, entertainmentIcons, allMediaIcons } from '@nice2dev/icons-media';

// Use collections for dynamic rendering
Object.entries(videoIcons).map(([name, Icon]) => <Icon key={name} size={24} />);
```

## Custom Icons

Create custom media icons using the factory:

```tsx
import { createMediaIcon } from '@nice2dev/icons-media';

const CustomPlayIcon = createMediaIcon(
  ({ color, variant }) => (
    <polygon points="5,3 19,12 5,21" fill={variant === 'filled' ? color : 'none'} stroke={color} strokeWidth="2" />
  ),
  { displayName: 'CustomPlayIcon' },
);
```

## License

MIT © Nice2Dev