@editora/icons

Framework-agnostic SVG icon definitions, registry APIs, and runtime rendering helpers.

Overview

@editora/icons is the raw icon layer for the Editora UI ecosystem. It provides SVG definitions and utilities that work in any runtime (React, Web Components, vanilla JS, server-side rendering pipelines, and design tooling scripts).

Best fit: use this package when you need framework-neutral icon lookup/render APIs or runtime icon registry extension.

Installation

npm install @editora/icons

Quick Start

import { renderIconSvg, listIcons } from '@editora/icons';

const svg = renderIconSvg('check', {
  variant: 'outline',
  size: 16,
  color: 'currentColor',
  strokeWidth: 1.5,
  decorative: true
});

console.log(svg);
console.log(listIcons().slice(0, 10));

Core Exports

Category Exports Purpose
Registry iconDefinitions, iconNameList, getIcon, hasIcon, listIcons, listIconAliases Discover and lookup icon definitions.
Mutation registerIcon, registerIcons Add custom icon definitions at runtime.
Rendering resolveIcon, renderIconSvg, iconToDataUri Render variant-specific SVG markup or data URIs.
Integration registerWithEditoraUI Bulk-register icons into @editora/ui-core icon stores.

Variants and Fallbacks

  • Supported variants: outline, solid, duotone.
  • If a requested variant is missing, resolver falls back to outline.
  • Name normalization is built in (e.g. chart_line and chart-line resolve consistently).

Render Options

The render helpers support styling and accessibility options such as:

  • size, color, secondaryColor, strokeWidth, absoluteStrokeWidth
  • strokeLinecap, strokeLinejoin
  • title, ariaLabel, decorative
  • rotate, flip, rtl
  • className, style, additional root attrs

Custom Icon Registration

import { registerIcon, renderIconSvg } from '@editora/icons';

registerIcon({
  name: 'billing-custom',
  aliases: ['billing-custom-outline'],
  viewBox: '0 0 15 15',
  variants: {
    outline: {
      nodes: [
        { tag: 'rect', attrs: { x: 2, y: 1.5, width: 11, height: 12, rx: 2, fill: 'none', stroke: 'currentColor' } }
      ]
    }
  }
});

console.log(renderIconSvg('billing-custom'));

UI-Core Bridge

import { registerWithEditoraUI } from '@editora/icons';

registerWithEditoraUI((name, svg) => {
  // register icon in UI icon map/store
  console.log('registered', name, svg.length);
});

Accessibility Guidance

  • Decorative icons should use decorative: true or omit semantic labels.
  • Semantic icons should include title or ariaLabel.
  • Keep contrast high when overriding color/secondaryColor.

Performance Notes

  • Package is sideEffects: false for tree-shaking.
  • Cache repeated renderIconSvg/iconToDataUri outputs in high-frequency paths.
  • Prefer normalized names in hot loops to reduce repeated normalization work.

Related Docs