IconsRegistry

Core class for registering custom SVG icons in the Stripo Editor extension.

class IconsRegistry

Description

IconsRegistry provides a mechanism to register custom SVG icons that can be used throughout your extension in controls, UI elements, and other components. By extending this class and implementing the registerIconsSvg() method, you can define a collection of SVG icons that will be available to your extension components.

This is particularly useful when you need custom iconography that matches your brand or provides specific functionality not available in the default icon set.

Import

import { IconsRegistry } from '@stripoinc/ui-editor-extensions';

Methods

registerIconsSvg()

Registers a map of SVG icons that will be available throughout the extension.

public registerIconsSvg(iconsMap: Record<string, string>): void

Parameters

Name	Type	Description
iconsMap	Record<string, string>	Map of icon keys to SVG string content

Returns

void

Implementation Requirements

• Must be implemented in your custom registry class
• Each icon should be provided as a complete SVG string
• Icon keys should be descriptive and unique
• SVG content should be valid and properly formatted

Usage

Basic Implementation

import { IconsRegistry } from '@stripoinc/ui-editor-extensions';

export class MyIconsRegistry extends IconsRegistry {
  public registerIconsSvg(iconsMap: Record<string, string>): void {
    iconsMap['my-custom-icon'] = `
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
      </svg>
    `;

    iconsMap['my-star-icon'] = `
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
      </svg>
    `;
  }
}

Registering with Extension

import { ExtensionBuilder } from '@stripoinc/ui-editor-extensions';
import { MyIconsRegistry } from './icons/MyIconsRegistry';

const extension = new ExtensionBuilder()
  .withIconsRegistry(MyIconsRegistry)
  .build();

Using Registered Icons

Once registered, icons can be referenced by their keys in controls and UI elements:

// In a custom control
export class MyCustomControl extends Control {
  public getIcon(): string {
    return 'my-custom-icon'; // References the registered icon key
  }
}

Best Practices

Icon Design

• Consistent sizing: Use consistent viewBox dimensions across all icons (e.g., 24x24)
• Simple paths: Keep SVG paths simple for better performance
• No inline styles: Avoid inline fill/stroke colors to allow dynamic theming
• Optimize SVGs: Minify SVG content to reduce payload size

Naming Conventions

// Good: Descriptive, kebab-case names
iconsMap['user-settings'] = '...';
iconsMap['export-pdf'] = '...';
iconsMap['color-picker'] = '...';

// Avoid: Generic or unclear names
iconsMap['icon1'] = '...';
iconsMap['custom'] = '...';

Performance Considerations

export class MyIconsRegistry extends IconsRegistry {
  public registerIconsSvg(iconsMap: Record<string, string>): void {
    // Register only icons you actually use
    // Don't import entire icon libraries unnecessarily
    iconsMap['needed-icon-1'] = ICON_SVG_1;
    iconsMap['needed-icon-2'] = ICON_SVG_2;
  }
}