@nice2dev/icons-media 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +175 -0
- package/dist/index.cjs +9574 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +1664 -0
- package/dist/index.mjs +9574 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
# @nice2dev/icons-media
|
|
2
|
+
|
|
3
|
+
React icon library for media, entertainment, creative, and multimedia applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @nice2dev/icons-media
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Features
|
|
12
|
+
|
|
13
|
+
- 🎬 **60 Media Icons** — Video, Audio, Creative, Entertainment
|
|
14
|
+
- 🎨 **Variants** — Filled, Outlined, Duotone styles
|
|
15
|
+
- ✨ **Animations** — 9 SMIL-based animations (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
|
|
16
|
+
- 📦 **Tree-shakeable** — Import only what you need
|
|
17
|
+
- 🔷 **TypeScript** — Full type definitions
|
|
18
|
+
- ⚛️ **React 19** — Latest React support
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { PlayIcon, MusicIcon, CameraIcon, StarIcon } from '@nice2dev/icons-media';
|
|
24
|
+
|
|
25
|
+
function App() {
|
|
26
|
+
return (
|
|
27
|
+
<div>
|
|
28
|
+
<PlayIcon size={24} color="#22c55e" />
|
|
29
|
+
<MusicIcon variant="filled" accentColor="#8b5cf6" />
|
|
30
|
+
<CameraIcon animation="pulse" />
|
|
31
|
+
<StarIcon size={32} accentColor="#fbbf24" />
|
|
32
|
+
</div>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Available Icons
|
|
38
|
+
|
|
39
|
+
### Video (15 icons)
|
|
40
|
+
|
|
41
|
+
| Icon | Component |
|
|
42
|
+
| ------------------ | ---------------------- |
|
|
43
|
+
| Play | `PlayIcon` |
|
|
44
|
+
| Pause | `PauseIcon` |
|
|
45
|
+
| Stop | `StopIcon` |
|
|
46
|
+
| Fast Forward | `FastForwardIcon` |
|
|
47
|
+
| Rewind | `RewindIcon` |
|
|
48
|
+
| Skip Next | `SkipNextIcon` |
|
|
49
|
+
| Skip Previous | `SkipPreviousIcon` |
|
|
50
|
+
| Record | `RecordIcon` |
|
|
51
|
+
| Video | `VideoIcon` |
|
|
52
|
+
| Video Off | `VideoOffIcon` |
|
|
53
|
+
| Screen | `ScreenIcon` |
|
|
54
|
+
| Fullscreen | `FullscreenIcon` |
|
|
55
|
+
| Picture in Picture | `PictureInPictureIcon` |
|
|
56
|
+
| Captions | `CaptionsIcon` |
|
|
57
|
+
| Replay | `ReplayIcon` |
|
|
58
|
+
|
|
59
|
+
### Audio (15 icons)
|
|
60
|
+
|
|
61
|
+
| Icon | Component |
|
|
62
|
+
| -------------- | ------------------- |
|
|
63
|
+
| Music | `MusicIcon` |
|
|
64
|
+
| Music Note | `MusicNoteIcon` |
|
|
65
|
+
| Headphones | `HeadphonesIcon` |
|
|
66
|
+
| Speaker | `SpeakerIcon` |
|
|
67
|
+
| Speaker Mute | `SpeakerMuteIcon` |
|
|
68
|
+
| Volume Up | `VolumeUpIcon` |
|
|
69
|
+
| Volume Down | `VolumeDownIcon` |
|
|
70
|
+
| Volume Mute | `VolumeMuteIcon` |
|
|
71
|
+
| Microphone | `MicrophoneIcon` |
|
|
72
|
+
| Microphone Off | `MicrophoneOffIcon` |
|
|
73
|
+
| Podcast | `PodcastIcon` |
|
|
74
|
+
| Radio | `RadioIcon` |
|
|
75
|
+
| Equalizer | `EqualizerIcon` |
|
|
76
|
+
| Playlist | `PlaylistIcon` |
|
|
77
|
+
| Shuffle | `ShuffleIcon` |
|
|
78
|
+
|
|
79
|
+
### Creative (15 icons)
|
|
80
|
+
|
|
81
|
+
| Icon | Component |
|
|
82
|
+
| ------------ | ------------------ |
|
|
83
|
+
| Camera | `CameraIcon` |
|
|
84
|
+
| Camera Off | `CameraOffIcon` |
|
|
85
|
+
| Image | `ImageIcon` |
|
|
86
|
+
| Gallery | `GalleryIcon` |
|
|
87
|
+
| Film | `FilmIcon` |
|
|
88
|
+
| Filmstrip | `FilmstripIcon` |
|
|
89
|
+
| Clapperboard | `ClapperboardIcon` |
|
|
90
|
+
| Director | `DirectorIcon` |
|
|
91
|
+
| Palette | `PaletteIcon` |
|
|
92
|
+
| Brush | `BrushIcon` |
|
|
93
|
+
| Pen | `PenIcon` |
|
|
94
|
+
| Pencil | `PencilIcon` |
|
|
95
|
+
| Eraser | `EraserIcon` |
|
|
96
|
+
| Color Picker | `ColorPickerIcon` |
|
|
97
|
+
| Layers | `LayersIcon` |
|
|
98
|
+
|
|
99
|
+
### Entertainment (15 icons)
|
|
100
|
+
|
|
101
|
+
| Icon | Component |
|
|
102
|
+
| --------- | --------------- |
|
|
103
|
+
| Gamepad | `GamepadIcon` |
|
|
104
|
+
| Joystick | `JoystickIcon` |
|
|
105
|
+
| Trophy | `TrophyIcon` |
|
|
106
|
+
| Medal | `MedalIcon` |
|
|
107
|
+
| Star | `StarIcon` |
|
|
108
|
+
| Heart | `HeartIcon` |
|
|
109
|
+
| Ticket | `TicketIcon` |
|
|
110
|
+
| Theater | `TheaterIcon` |
|
|
111
|
+
| Popcorn | `PopcornIcon` |
|
|
112
|
+
| TV | `TVIcon` |
|
|
113
|
+
| Stream | `StreamIcon` |
|
|
114
|
+
| Live | `LiveIcon` |
|
|
115
|
+
| Broadcast | `BroadcastIcon` |
|
|
116
|
+
| Antenna | `AntennaIcon` |
|
|
117
|
+
| Satellite | `SatelliteIcon` |
|
|
118
|
+
|
|
119
|
+
## Props
|
|
120
|
+
|
|
121
|
+
| Prop | Type | Default | Description |
|
|
122
|
+
| ------------- | ------------------------------------- | ---------------- | ----------------------- |
|
|
123
|
+
| `size` | `number` | `24` | Icon size in pixels |
|
|
124
|
+
| `color` | `string` | `'currentColor'` | Primary icon color |
|
|
125
|
+
| `accentColor` | `string` | — | Secondary/accent color |
|
|
126
|
+
| `variant` | `'filled' \| 'outlined' \| 'duotone'` | `'outlined'` | Icon style variant |
|
|
127
|
+
| `animation` | `MediaIconAnimation` | — | Animation type |
|
|
128
|
+
| `className` | `string` | — | CSS class name |
|
|
129
|
+
| `style` | `CSSProperties` | — | Inline styles |
|
|
130
|
+
| `...props` | `SVGProps` | — | Any valid SVG attribute |
|
|
131
|
+
|
|
132
|
+
## Animations
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
import { PlayIcon } from '@nice2dev/icons-media';
|
|
136
|
+
|
|
137
|
+
// Available animations
|
|
138
|
+
<PlayIcon animation="pulse" /> // Opacity pulse
|
|
139
|
+
<PlayIcon animation="grow" /> // Scale grow
|
|
140
|
+
<PlayIcon animation="shake" /> // Horizontal shake
|
|
141
|
+
<PlayIcon animation="spin" /> // 360° rotation
|
|
142
|
+
<PlayIcon animation="bounce" /> // Vertical bounce
|
|
143
|
+
<PlayIcon animation="fade" /> // Fade in/out
|
|
144
|
+
<PlayIcon animation="flip" /> // Y-axis flip
|
|
145
|
+
<PlayIcon animation="slide" /> // Horizontal slide
|
|
146
|
+
<PlayIcon animation="glow" /> // Glow effect
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Icon Collections
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
import { videoIcons, audioIcons, creativeIcons, entertainmentIcons, allMediaIcons } from '@nice2dev/icons-media';
|
|
153
|
+
|
|
154
|
+
// Use collections for dynamic rendering
|
|
155
|
+
Object.entries(videoIcons).map(([name, Icon]) => <Icon key={name} size={24} />);
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## Custom Icons
|
|
159
|
+
|
|
160
|
+
Create custom media icons using the factory:
|
|
161
|
+
|
|
162
|
+
```tsx
|
|
163
|
+
import { createMediaIcon } from '@nice2dev/icons-media';
|
|
164
|
+
|
|
165
|
+
const CustomPlayIcon = createMediaIcon(
|
|
166
|
+
({ color, variant }) => (
|
|
167
|
+
<polygon points="5,3 19,12 5,21" fill={variant === 'filled' ? color : 'none'} stroke={color} strokeWidth="2" />
|
|
168
|
+
),
|
|
169
|
+
{ displayName: 'CustomPlayIcon' },
|
|
170
|
+
);
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
## License
|
|
174
|
+
|
|
175
|
+
MIT © Nice2Dev
|