restream-admin-ui-icons 1.0.0 → 2.0.0

package/README.md

@@ -0,0 +1,132 @@
+# restream-admin-ui-icons
+
+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.
+
+- 165 icons across two categories: `place` (79) and `technology` (86)
+- 24×24px, SVG-based, `fill="currentColor"` — inherits color from CSS
+- TypeScript-first: full `SVGProps<SVGSVGElement>` typings
+- Dual format: ESM + CommonJS
+
+---
+
+## Installation
+
+```bash
+npm install restream-admin-ui-icons
+```
+
+Requires React ≥ 17 as a peer dependency.
+
+---
+
+## Usage
+
+### Import what you need
+
+```tsx
+import { Wifi, Bluetooth } from 'restream-admin-ui-icons';
+
+function Status() {
+  return (
+    <div>
+      <Wifi width={20} height={20} />
+      <Bluetooth className="icon" />
+    </div>
+  );
+}
+```
+
+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.
+
+### Styling
+
+Icons use `fill="currentColor"`, so color is controlled via CSS:
+
+```tsx
+// Via inline style
+<Wifi style={{ color: '#2f9aff' }} />
+
+// Via className (Tailwind, CSS modules, etc.)
+<Wifi className="text-blue-500 w-5 h-5" />
+
+// Via parent color inheritance
+<span style={{ color: 'red' }}>
+  <Wifi /> {/* renders red */}
+</span>
+```
+
+### Override size
+
+Default is 24×24px. Override via props or CSS:
+
+```tsx
+<Wifi width={16} height={16} />
+<Wifi style={{ width: 32, height: 32 }} />
+```
+
+### Pass any SVG attribute
+
+Components accept all standard `SVGProps<SVGSVGElement>`:
+
+```tsx
+<Wifi
+  aria-label="WiFi connected"
+  role="img"
+  className="icon-wifi"
+  onClick={handleClick}
+  style={{ opacity: 0.5 }}
+/>
+```
+
+---
+
+## Icon categories
+
+### Technology (86 icons)
+
+`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
+
+### Place (79 icons)
+
+`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
+
+---
+
+## How tree-shaking works
+
+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**.
+
+```
+Project imports: { Wifi, Cloud }
+  → bundle includes: Wifi.js chunk + Cloud.js chunk
+  → 163 other icon chunks: excluded ✅
+```
+
+No extra configuration needed — tree-shaking works out of the box with standard React setups (Create React App, Vite, Next.js, etc.).
+
+---
+
+## Package exports
+
+```
+restream-admin-ui-icons          → all icons (named exports)
+restream-admin-ui-icons/place/*  → individual place icon chunks
+restream-admin-ui-icons/technology/*  → individual technology icon chunks
+```
+
+---
+
+## Regenerating icons
+
+Icons are sourced from `@atomaro/icons`. To regenerate the source components:
+
+```bash
+npm run generate   # generates src/ from @atomaro/icons
+npm run build      # compiles to dist/
+```
+
+---
+
+## License
+
+MIT

package/dist/16/index.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var chunk6R5MLI6T_cjs = require('../chunk-6R5MLI6T.cjs');
+require('../chunk-75ZPJI57.cjs');
+
+
+
+Object.defineProperty(exports, "action", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.action_exports; }
+});
+Object.defineProperty(exports, "alert", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.alert_exports; }
+});
+Object.defineProperty(exports, "business", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.business_exports; }
+});
+Object.defineProperty(exports, "communication", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.communication_exports; }
+});
+Object.defineProperty(exports, "culture", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.culture_exports; }
+});
+Object.defineProperty(exports, "document", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.document_exports; }
+});
+Object.defineProperty(exports, "editor", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.editor_exports; }
+});
+Object.defineProperty(exports, "logo", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.logo_exports; }
+});
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.media_exports; }
+});
+Object.defineProperty(exports, "navigation", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.navigation_exports; }
+});
+Object.defineProperty(exports, "place", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.place_exports; }
+});
+Object.defineProperty(exports, "rating", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.rating_exports; }
+});
+Object.defineProperty(exports, "technology", {
+  enumerable: true,
+  get: function () { return chunk6R5MLI6T_cjs.technology_exports; }
+});

package/dist/16/index.d.cts

@@ -0,0 +1,3 @@
+export { a as action, b as alert, c as business, d as communication, e as culture, f as document, g as editor, h as logo, j as media, k as navigation, l as place, m as rating, n as technology } from '../index-CwzC7947.cjs';
+import 'react/jsx-runtime';
+import 'react';

package/dist/16/index.d.ts

@@ -0,0 +1,3 @@
+export { a as action, b as alert, c as business, d as communication, e as culture, f as document, g as editor, h as logo, j as media, k as navigation, l as place, m as rating, n as technology } from '../index-CwzC7947.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/16/index.js

@@ -0,0 +1,2 @@
+export { action_exports as action, alert_exports as alert, business_exports as business, communication_exports as communication, culture_exports as culture, document_exports as document, editor_exports as editor, logo_exports as logo, media_exports as media, navigation_exports as navigation, place_exports as place, rating_exports as rating, technology_exports as technology } from '../chunk-J4ZSA3F4.js';
+import '../chunk-MLKGABMK.js';

package/dist/24/index 2.js

@@ -0,0 +1,2 @@
+export { action_exports as action, alert_exports as alert, business_exports as business, communication_exports as communication, culture_exports as culture, document_exports as document, editor_exports as editor, logo_exports as logo, media_exports as media, navigation_exports as navigation, place_exports as place, rating_exports as rating, technology_exports as technology } from '../chunk-WHU7SHJM.js';
+import '../chunk-MLKGABMK.js';

package/dist/24/index.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var chunkL2RDQIWN_cjs = require('../chunk-L2RDQIWN.cjs');
+require('../chunk-75ZPJI57.cjs');
+
+
+
+Object.defineProperty(exports, "action", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.action_exports; }
+});
+Object.defineProperty(exports, "alert", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.alert_exports; }
+});
+Object.defineProperty(exports, "business", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.business_exports; }
+});
+Object.defineProperty(exports, "communication", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.communication_exports; }
+});
+Object.defineProperty(exports, "culture", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.culture_exports; }
+});
+Object.defineProperty(exports, "document", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.document_exports; }
+});
+Object.defineProperty(exports, "editor", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.editor_exports; }
+});
+Object.defineProperty(exports, "logo", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.logo_exports; }
+});
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.media_exports; }
+});
+Object.defineProperty(exports, "navigation", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.navigation_exports; }
+});
+Object.defineProperty(exports, "place", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.place_exports; }
+});
+Object.defineProperty(exports, "rating", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.rating_exports; }
+});
+Object.defineProperty(exports, "technology", {
+  enumerable: true,
+  get: function () { return chunkL2RDQIWN_cjs.technology_exports; }
+});

package/dist/24/index.d.cts

@@ -0,0 +1,3 @@
+export { a as action, b as alert, c as business, d as communication, e as culture, f as document, g as editor, h as logo, j as media, k as navigation, l as place, m as rating, n as technology } from '../index-mKoKYZGN.cjs';
+import 'react/jsx-runtime';
+import 'react';

package/dist/24/index.d.ts

@@ -0,0 +1,3 @@
+export { a as action, b as alert, c as business, d as communication, e as culture, f as document, g as editor, h as logo, j as media, k as navigation, l as place, m as rating, n as technology } from '../index-mKoKYZGN.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/24/index.js

@@ -0,0 +1,2 @@
+export { action_exports as action, alert_exports as alert, business_exports as business, communication_exports as communication, culture_exports as culture, document_exports as document, editor_exports as editor, logo_exports as logo, media_exports as media, navigation_exports as navigation, place_exports as place, rating_exports as rating, technology_exports as technology } from '../chunk-WHU7SHJM.js';
+import '../chunk-MLKGABMK.js';

package/dist/8/index.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var chunkOVJVZQJG_cjs = require('../chunk-OVJVZQJG.cjs');
+require('../chunk-75ZPJI57.cjs');
+
+
+
+Object.defineProperty(exports, "communication", {
+  enumerable: true,
+  get: function () { return chunkOVJVZQJG_cjs.communication_exports; }
+});
+Object.defineProperty(exports, "navigation", {
+  enumerable: true,
+  get: function () { return chunkOVJVZQJG_cjs.navigation_exports; }
+});
+Object.defineProperty(exports, "rating", {
+  enumerable: true,
+  get: function () { return chunkOVJVZQJG_cjs.rating_exports; }
+});

package/dist/8/index.d 2.cts

@@ -0,0 +1,3 @@
+export { a as communication, b as navigation, c as rating } from '../index-DeICsjGM.cjs';
+import 'react/jsx-runtime';
+import 'react';

package/dist/8/index.d 2.ts

@@ -0,0 +1,3 @@
+export { a as communication, b as navigation, c as rating } from '../index-DeICsjGM.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/8/index.d.cts

@@ -0,0 +1,3 @@
+export { a as communication, b as navigation, c as rating } from '../index-DeICsjGM.cjs';
+import 'react/jsx-runtime';
+import 'react';

package/dist/8/index.d.ts

@@ -0,0 +1,3 @@
+export { a as communication, b as navigation, c as rating } from '../index-DeICsjGM.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/8/index.js

@@ -0,0 +1,2 @@
+export { communication_exports as communication, navigation_exports as navigation, rating_exports as rating } from '../chunk-Q5FZCGI5.js';
+import '../chunk-MLKGABMK.js';