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.

• 1 146 icons across 8 / 16 / 24 px sizes and 13 categories
• SVG-based, fill="currentColor" — inherits color from CSS
• TypeScript-first: full SVGProps<SVGSVGElement> typings
• Dual format: ESM + CommonJS

Installation

npm install restream-admin-ui-icons

Requires React ≥ 17 as a peer dependency.

Usage

Import by category

The root import is an alias for 24px icons. Use subpath imports for other sizes.

// Root import → 24px (most common)
import { action, media } from 'restream-admin-ui-icons';

// Explicit size subpaths
import { action }        from 'restream-admin-ui-icons/24';  // same as root
import { action }        from 'restream-admin-ui-icons/16';
import { communication } from 'restream-admin-ui-icons/8';

// Direct category import — best for tree-shaking
import { AddLarge, Refresh } from 'restream-admin-ui-icons/24/action';

function Toolbar() {
  return (
    <div>
      <action.AddLarge />
      <media.Play width={20} height={20} />
    </div>
  );
}

Styling

Icons use fill="currentColor", so color is controlled via CSS:

// Direct import
import { AddLarge } from 'restream-admin-ui-icons/24/action';
<AddLarge style={{ color: '#2f9aff' }} />

// Via category namespace
<action.AddLarge style={{ color: '#2f9aff' }} />

// Via className (Tailwind, CSS modules, etc.)
<action.AddLarge className="text-blue-500 w-5 h-5" />

// Via parent color inheritance
<span style={{ color: 'red' }}>
  <action.AddLarge /> {/* renders red */}
</span>

Override size

Each icon defaults to its native px size. Override via props or CSS:

<action.AddLarge width={16} height={16} />
<action.AddLarge style={{ width: 32, height: 32 }} />

Pass any SVG attribute

Components accept all standard SVGProps<SVGSVGElement>:

<action.AddLarge
  aria-label="Add item"
  role="img"
  className="icon"
  onClick={handleClick}
  style={{ opacity: 0.5 }}
/>

Package exports

restream-admin-ui-icons        → 24px (alias for /24)
restream-admin-ui-icons/24     → { action, alert, business, communication, … }
restream-admin-ui-icons/16     → { action, alert, business, communication, … }
restream-admin-ui-icons/8      → { communication, navigation, rating }
restream-admin-ui-icons/24/*   → individual 24px categories (e.g. /24/action)
restream-admin-ui-icons/16/*   → individual 16px categories
restream-admin-ui-icons/8/*    → individual 8px categories

Available categories (16px & 24px)

action · alert · business · communication · culture · document · editor · logo · media · navigation · place · rating · technology

How tree-shaking works

The package is built with tsup using splitting: true and "sideEffects": false. Any modern bundler (Vite, webpack 5, Rollup) will include only the icons you actually import.

Regenerating icons

Icons are sourced from SVG files in the Icons/ directory of this repository. To regenerate the source components:

npm run generate   # generates src/ from Icons/*.svg
npm run build      # compiles to dist/

Both steps run automatically on npm publish via the prepublishOnly hook.

License

MIT