@genart-dev/plugin-symbols

Vector symbol library plugin for genart.dev — design layer rendering, Iconify integration, and symbol management tools. Renders SVG path data as non-destructive canvas layers with fill/stroke overrides and aspect ratio control.

Part of genart.dev — a generative art platform with an MCP server, desktop app, and IDE extensions.

Install

npm install @genart-dev/plugin-symbols

Usage

import symbolsPlugin from "@genart-dev/plugin-symbols";
import { createDefaultRegistry } from "@genart-dev/core";

const registry = createDefaultRegistry();
registry.registerPlugin(symbolsPlugin);

// Or access individual exports
import {
  symbolLayerType,
  symbolMcpTools,
} from "@genart-dev/plugin-symbols";

Layer Types (1)

Symbol (symbols:symbol, image)

Renders SVG path data as a canvas layer. Paths are stored as JSON and drawn via Path2D with viewBox-to-bounds coordinate transformation.

| Property | Type | Default | Description | |----------|------|---------|-------------| | symbolId | string | "" | Symbol ID (e.g. "ph-cat") | | iconifyId | string | "" | Original Iconify ID (e.g. "ph:cat") | | viewBox | string | "0 0 24 24" | SVG viewBox | | paths | string | "[]" | SVG path data (JSON array of { d, fill?, stroke?, strokeWidth?, role? }) | | fillOverride | string | "" | Override fill color for all paths | | strokeOverride | string | "" | Override stroke color for all paths | | preserveAspect | boolean | true | Maintain aspect ratio (letterbox) or stretch to fill |

Test Render

24-panel montage showing the symbol layer type rendering real Iconify icons:

• Row 1: Phosphor icons (fill style) — cat, tree, sun, heart, star, mountains
• Row 2: Lucide icons (stroke style) — anchor, house, flower, cloud, waves, arrow-left
• Row 3: Tabler icons (stroke style) — butterfly, planet, campfire, sailboat, kayak, wave-square
• Row 4: Layer features — fill override (red), stroke override (green), no-aspect-preserve, fill override (blue), stroke override (gold), fill override (purple)

Regenerate with node render-test-symbols.cjs (requires canvas dev dependency and network access).

MCP Tools (7)

| Tool | Description | |------|-------------| | search_symbols | Search the symbol registry by keyword, category, and/or style | | list_symbol_categories | List all symbol categories with counts | | add_symbol | Add a registry symbol to a sketch with symbol-draw component | | remove_symbol | Remove a symbol from a sketch | | create_symbol | Create a custom symbol with SVG path data and validate it | | fetch_symbol | Search Iconify or embed an icon into a sketch (275k+ icons) | | place_symbol | Place a symbol as a symbols:symbol design layer on the canvas |

Related Packages

| Package | Purpose | |---------|---------| | @genart-dev/symbols | Symbol data registry and Iconify integration (dependency) | | @genart-dev/core | Plugin host, layer system (dependency) | | @genart-dev/mcp-server | MCP server that surfaces plugin tools to AI agents |

Support

Questions, bugs, or feedback — [email protected] or open an issue.

License

MIT