Icon Registration

About 2 min

Icon Registration

WebCAD uses SVG icons and supports registering custom icons through IconRegistry.

Using `IconRegistry`

import { IconRegistry } from 'vjcad';

const iconRegistry = IconRegistry.getInstance();

// Register SVG icons
iconRegistry.registerIcon('my-line-icon', `
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <line x1="4" y1="20" x2="20" y2="4"/>
  </svg>
`);

iconRegistry.registerIcon('my-circle-icon', `
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="8"/>
  </svg>
`);

// Filled icon
iconRegistry.registerIcon('my-filled-icon', `
  <svg viewBox="0 0 24 24">
    <rect x="4" y="4" width="16" height="16" fill="currentColor"/>
  </svg>
`);

Get and Check Icons

// Get icon
const svg = iconRegistry.getIcon('my-line-icon');

// Check whether icon exists
if (iconRegistry.hasIcon('my-icon')) {
  // ...
}

// Unregister
iconRegistry.unregisterIcon('my-line-icon');

`IconRegistry` API

Method	Description
`getInstance()`	Get singleton instance
`registerIcon(name, svg)`	Register icon
`unregisterIcon(name)`	Unregister icon
`getIcon(name)`	Get icon SVG
`hasIcon(name)`	Check whether icon exists

Icon Design Guidelines

`viewBox`

Use 0 0 24 24 whenever possible:

<svg viewBox="0 0 24 24">
  ...
</svg>

Color

Use currentColor to support themes:

<!-- Stroke icon -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <line x1="4" y1="20" x2="20" y2="4"/>
</svg>

<!-- Filled icon -->
<svg viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="16" fill="currentColor"/>
</svg>

Stroke Width

stroke-width="2" is recommended.

Icon Examples

Line Icon

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <line x1="4" y1="20" x2="20" y2="4"/>
</svg>

Circle Icon

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="8"/>
</svg>

Rectangle Icon

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <rect x="4" y="4" width="16" height="16"/>
</svg>

Polygon Icon

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <polygon points="12,2 22,22 2,22"/>
</svg>

Circle with Centerlines

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="8"/>
  <line x1="4" y1="12" x2="20" y2="12" stroke-dasharray="2,2"/>
  <line x1="12" y1="4" x2="12" y2="20" stroke-dasharray="2,2"/>
</svg>

Move Icon

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <line x1="12" y1="4" x2="12" y2="20"/>
  <line x1="4" y1="12" x2="20" y2="12"/>
  <polyline points="8,8 12,4 16,8"/>
  <polyline points="8,16 12,20 16,16"/>
  <polyline points="8,8 4,12 8,16"/>
  <polyline points="16,8 20,12 16,16"/>
</svg>

Use in Plugins

async onActivate(context: PluginContext): Promise<void> {
  // Register icon
  context.registerIcon('MY_TOOL', `
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="8"/>
    </svg>
  `);
  
  // Use in Ribbon button
  context.addRibbonButton('home', 'draw', {
    cmd: 'MYTOOL',
    label: 'My Tool',
    icon: 'MY_TOOL'  // Reference registered icon
  }, 'primary');
}

Notes

Use unique icon names to avoid conflicts with built-in icons
Use currentColor to support both light and dark themes
Keep icons simple and avoid overly complex paths
Use a consistent viewBox, preferably 24x24
Use an appropriate stroke width, preferably stroke-width="2"

Next Steps

Ribbon Menu - Ribbon configuration
Plugin System - plugin development