restream-admin-ui-icons 1.0.0 → 1.0.1
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 +132 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# restream-admin-ui-icons
|
|
2
|
+
|
|
3
|
+
Tree-shakeable React icon components for Restream Admin UI. **Only the icons you import end up in the bundle** — unused icons are automatically eliminated by your bundler.
|
|
4
|
+
|
|
5
|
+
- 165 icons across two categories: `place` (79) and `technology` (86)
|
|
6
|
+
- 24×24px, SVG-based, `fill="currentColor"` — inherits color from CSS
|
|
7
|
+
- TypeScript-first: full `SVGProps<SVGSVGElement>` typings
|
|
8
|
+
- Dual format: ESM + CommonJS
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install restream-admin-ui-icons
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Requires React ≥ 17 as a peer dependency.
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
### Import what you need
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import { Wifi, Bluetooth } from 'restream-admin-ui-icons';
|
|
28
|
+
|
|
29
|
+
function Status() {
|
|
30
|
+
return (
|
|
31
|
+
<div>
|
|
32
|
+
<Wifi width={20} height={20} />
|
|
33
|
+
<Bluetooth className="icon" />
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Only `Wifi` and `Bluetooth` will be included in your bundle — the other 163 icons are tree-shaken out automatically by Vite, webpack 5, or Rollup.
|
|
40
|
+
|
|
41
|
+
### Styling
|
|
42
|
+
|
|
43
|
+
Icons use `fill="currentColor"`, so color is controlled via CSS:
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
// Via inline style
|
|
47
|
+
<Wifi style={{ color: '#2f9aff' }} />
|
|
48
|
+
|
|
49
|
+
// Via className (Tailwind, CSS modules, etc.)
|
|
50
|
+
<Wifi className="text-blue-500 w-5 h-5" />
|
|
51
|
+
|
|
52
|
+
// Via parent color inheritance
|
|
53
|
+
<span style={{ color: 'red' }}>
|
|
54
|
+
<Wifi /> {/* renders red */}
|
|
55
|
+
</span>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Override size
|
|
59
|
+
|
|
60
|
+
Default is 24×24px. Override via props or CSS:
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
<Wifi width={16} height={16} />
|
|
64
|
+
<Wifi style={{ width: 32, height: 32 }} />
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Pass any SVG attribute
|
|
68
|
+
|
|
69
|
+
Components accept all standard `SVGProps<SVGSVGElement>`:
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
<Wifi
|
|
73
|
+
aria-label="WiFi connected"
|
|
74
|
+
role="img"
|
|
75
|
+
className="icon-wifi"
|
|
76
|
+
onClick={handleClick}
|
|
77
|
+
style={{ opacity: 0.5 }}
|
|
78
|
+
/>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## Icon categories
|
|
84
|
+
|
|
85
|
+
### Technology (86 icons)
|
|
86
|
+
|
|
87
|
+
`AllDevices` · `Antenna` · `Atom` · `BatteryChargeHalh` · `BatteryFill` · `Bluetooth` · `BluetoothOff` · `Broadcast` · `BroadcastOff` · `CameraHome` · `Chip` · `Cloud` · `CloudGame` · `CloudServer` · `Console` · `Controller` · `Counter` · `Cursor` · `Desktop` · `Download` · `Drone` · `FaceId` · `Flash` · `Folder` · `Globe` · `Headphones` · `HeadphonesOff` · `HeadphonesWireless` · `Home` · `Keyboard` · `Laptop` · `Link` · `Microphone` · `MicrophoneOff` · `Mobile` · `Modem` · `Monitor` · `Mouse` · `Network` · `Paste` · `Phone` · `PhoneOff` · `Photo` · `PhotoOff` · `Pin` · `PinOff` · `Play` · `Podcast` · `Printer` · `Remote` · `Router` · `Satellite` · `Screen` · `ScreenOff` · `Server` · `Share` · `Signal` · `SignalOff` · `Sim` · `Speaker` · `SpeakerOff` · `Storage` · `Stream` · `Tablet` · `Touch` · `TV` · `Upload` · `Usb` · `Video` · `VideoOff` · `Watch` · `Webcam` · `WebcamOff` · `Wifi` · `WifiDisconnect` · `WifiOff` · `Wireless` · `WirelessCharger` · `WirelessOff` · and more
|
|
88
|
+
|
|
89
|
+
### Place (79 icons)
|
|
90
|
+
|
|
91
|
+
`Administration` · `Armchair` · `Backyard` · `BackyardTree` · `Balloon` · `Bank` · `Bench` · `Bridge` · `Building` · `Bus` · `BusStop` · `Cafe` · `Car` · `CarWash` · `Cinema` · `City` · `Construction` · `Crane` · `ElectricCar` · `Factory` · `Ferris` · `Flag` · `Fountain` · `Gas` · `Hospital` · `Hotel` · `House` · `Hut` · `Kindergarten` · `Library` · `Lighthouse` · `Mall` · `Map` · `Metro` · `Monument` · `Mosque` · `Museum` · `Office` · `Park` · `Parking` · `Pharmacy` · `Police` · `Port` · `Post` · `Railway` · `Restaurant` · `Road` · `Roof` · `School` · `Shop` · `Skyscraper` · `Stadium` · `Store` · `Taxi` · `Temple` · `Theatre` · `Tower` · `Townhall` · `Train` · `Tram` · `University` · `Windmill` · and more
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## How tree-shaking works
|
|
96
|
+
|
|
97
|
+
The package is built with [tsup](https://tsup.egoist.dev) using `splitting: true`, which produces a separate JS chunk per icon. Combined with `"sideEffects": false` in `package.json`, any modern bundler (Vite, webpack 5, Rollup) will include **only the chunks for icons you actually import**.
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
Project imports: { Wifi, Cloud }
|
|
101
|
+
→ bundle includes: Wifi.js chunk + Cloud.js chunk
|
|
102
|
+
→ 163 other icon chunks: excluded ✅
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
No extra configuration needed — tree-shaking works out of the box with standard React setups (Create React App, Vite, Next.js, etc.).
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## Package exports
|
|
110
|
+
|
|
111
|
+
```
|
|
112
|
+
restream-admin-ui-icons → all icons (named exports)
|
|
113
|
+
restream-admin-ui-icons/place/* → individual place icon chunks
|
|
114
|
+
restream-admin-ui-icons/technology/* → individual technology icon chunks
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## Regenerating icons
|
|
120
|
+
|
|
121
|
+
Icons are sourced from `@atomaro/icons`. To regenerate the source components:
|
|
122
|
+
|
|
123
|
+
```bash
|
|
124
|
+
npm run generate # generates src/ from @atomaro/icons
|
|
125
|
+
npm run build # compiles to dist/
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
## License
|
|
131
|
+
|
|
132
|
+
MIT
|