npm package: @genart-dev/plugin-symbols
Description: Vector symbol library plugin for genart.dev — design layer rendering, Iconify integration, and symbol management tools
Author: genart.dev
Latest version: 0.2.0

# @genart-dev/plugin-symbols

Vector symbol library plugin for [genart.dev](https://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](https://genart.dev) — a generative art platform with an MCP server, desktop app, and IDE extensions.

## Install

```bash
npm install @genart-dev/plugin-symbols
```

## Usage

```typescript
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

![Symbol layer montage](test-renders/symbol-layer.png)

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)

Source: [`test-renders/symbol-layer.genart`](test-renders/symbol-layer.genart) (icon SVG data pre-fetched from Iconify). Regenerate with `bash test-renders/render.sh`.

## 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`](https://github.com/genart-dev/symbols) | Symbol data registry and Iconify integration (dependency) |
| [`@genart-dev/core`](https://github.com/genart-dev/core) | Plugin host, layer system (dependency) |
| [`@genart-dev/mcp-server`](https://github.com/genart-dev/mcp-server) | MCP server that surfaces plugin tools to AI agents |

## Support

Questions, bugs, or feedback — [support@genart.dev](mailto:support@genart.dev) or [open an issue](https://github.com/genart-dev/plugin-symbols/issues).

## License

MIT