Designful Launch editor

Icon Library UI Plugin

All Tags /PluginsIconsSVG

Overview

@designful/icon-library-ui-plugin adds an Iconify-backed icon workflow to the Editor UI plugin launcher.

It uses the same validated command path as other UI plugins, so modal interactions and API calls both end up running the insert-svg command.

Actions

  • Search and Insert Top Match: Search Iconify by keyword and insert the first match as an editable SVG vector group.
  • Insert Icon by Exact Name: Insert one icon directly by its full Iconify id, such as mdi:home.

Inputs

Both actions support:

  • size: requested icon height in pixels, clamped to 8..512
  • color: hex color passed to the Iconify SVG endpoint

Search action also accepts:

  • query: required keyword search
  • collection: optional Iconify prefix filter such as mdi or lucide

Runtime Requirements

The app must expose these same-origin endpoints:

  • GET /api/iconify/search
  • GET /api/iconify/icon

Those routes validate user input before proxying Iconify API requests.

Undo/Redo

Inserted icons are created through one grouped history step.

After insertion:

  • the new vector group is selected
  • standard editor undo removes the icon
  • redo restores the icon group and selection visuals

API Example

await editor.uiPlugins?.executeAction('icon-library-ui-plugin', 'insert-icon-by-name', {
  iconName: 'mdi:home',
  size: 24,
  color: '#111827',
})

Notes

  • The current MVP inserts the top search match instead of rendering a full search grid.
  • Inserted objects are named Icon: <iconName> to make relaunch/history inspection easier.
  • Docs overview: /docs/plugins/ui-plugins/icon-library/overview
  • Docs live demo: /docs/plugins/ui-plugins/icon-library/demo