@editora/react-icons

Overview

@editora/react-icons is the React-facing icon package built on top of @editora/icons. It provides a generic <Icon /> component, generated named icons, and shared defaults through IconProvider.

Installation

npm install @editora/react-icons @editora/icons

Peer dependencies: react ^16.8 || ^17 || ^18 || ^19.

Quick Start

import { IconProvider, Icon, CheckIcon, ChartLineIcon } from '@editora/react-icons';

export function Example() {
  return (
    <IconProvider
      value={{
        variant: 'outline',
        size: 18,
        color: 'var(--ui-fg)',
        strokeWidth: 1.5
      }}
    >
      <CheckIcon ariaLabel="Saved" />
      <ChartLineIcon variant="duotone" secondaryColor="var(--ui-muted)" />
      <Icon name="command" title="Command palette" />
    </IconProvider>
  );
}

Package API

Icon Props

Icon accepts standard SVG props plus icon-specific fields:

• name, variant, size, color, secondaryColor, strokeWidth
• absoluteStrokeWidth, strokeLinecap, strokeLinejoin
• decorative, title, ariaLabel
• rotate, flip, rtl

Usage Patterns

1. Named imports (best for static usage)

import { CheckIcon, AlertTriangleIcon } from '@editora/react-icons';

export function Status({ ok }: { ok: boolean }) {
  return ok
    ? <CheckIcon ariaLabel="Healthy" />
    : <AlertTriangleIcon ariaLabel="Warning" />;
}

2. Dynamic rendering from typed names

import { Icon, type IconName } from '@editora/react-icons';

const items: Array<{ label: string; icon: IconName }> = [
  { label: 'Dashboard', icon: 'dashboard' },
  { label: 'Orders', icon: 'order' },
  { label: 'Reports', icon: 'report' }
];

export function Sidebar() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.label}>
          <Icon name={item.icon} aria-hidden size={16} />
          <span>{item.label}</span>
        </li>
      ))}
    </ul>
  );
}

3. Runtime lookup

import { getIconComponent, type IconName } from '@editora/react-icons';

export function PluginIcon({ name }: { name: IconName }) {
  const Comp = getIconComponent(name);
  return <Comp size={18} aria-hidden />;
}

Provider and Theming

import { IconProvider, SearchIcon, SettingsIcon } from '@editora/react-icons';

export function HeaderActions() {
  return (
    <IconProvider value={{ size: 16, color: 'var(--color-fg-muted)' }}>
      <SearchIcon ariaLabel="Search" />
      <IconProvider value={{ color: 'var(--color-primary)' }}>
        <SettingsIcon ariaLabel="Settings" />
      </IconProvider>
    </IconProvider>
  );
}

Nested providers merge with parent values, so local overrides are easy.

Accessibility

• Use aria-hidden for purely decorative icons.
• Use title or ariaLabel for semantic icons.
• Keep icon meaning independent of color alone to support low-vision users.

Performance

• Package has sideEffects: false for tree-shaking.
• Prefer named imports for static icons.
• Use dynamic Icon name="..." only when names are data-driven.