SVG Icon Editor MCP Server

Interactive SVG editor for tweaking paths, colors, and sizes with preview and React component export.

Features

• Parse SVG - Extract viewBox, dimensions, and individual elements with their attributes
• Modify SVG - Apply attribute modifications to SVG elements (colors, sizes, paths, etc.)
• Export React Component - Convert SVG to a React component with proper JSX syntax and camelCase attributes
• Interactive UI - Real-time SVG preview in the editor interface
• Element-level control - Modify specific elements by index with precise attribute editing
• JSX-ready output - Exported React components are production-ready with TypeScript types

Installation

npm install @gongrzhe/server-svg-icon-editor

Usage

As a CLI

npx @gongrzhe/server-svg-icon-editor

Claude Desktop Configuration

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "svg-icon-editor": {
      "command": "npx",
      "args": ["-y", "@gongrzhe/server-svg-icon-editor"]
    }
  }
}

Claude Code Configuration

claude mcp add svg-icon-editor -- npx -y @gongrzhe/server-svg-icon-editor

Tools

parse-svg

Parses an SVG string and extracts viewBox, dimensions, and individual elements with their attributes.

Input:

• svg (string) - The SVG markup string to parse

Output:

• viewBox (string) - The SVG viewBox attribute value
• width (string) - The SVG width attribute (if present)
• height (string) - The SVG height attribute (if present)
• elements (array) - Array of SVG elements with their attributes
  • type (string) - Element type (path, circle, rect, line, ellipse, polygon, polyline)
  • attributes (object) - Element attributes as key-value pairs
  • id (string) - Element ID if present

modify-svg

Applies attribute modifications to elements in an SVG string and returns the modified SVG.

Input:

• svg (string) - The SVG markup string to modify
• modifications (array) - List of modifications to apply
  • elementIndex (number) - Index of the element to modify
  • attribute (string) - Attribute name to set
  • value (string) - New value for the attribute

Output:

• modifiedSvg (string) - The modified SVG markup
• elements (array) - Updated elements array

export-react-component

Converts an SVG string into a React component with camelCase attributes and proper JSX syntax.

Input:

• svg (string) - The SVG markup string to convert
• componentName (string, optional) - Name for the React component (defaults to 'Icon')

Output:

• code (string) - The generated React component code
• componentName (string) - The name of the generated component

Example Prompt

Edit this SVG: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#3B82F6"/></svg>

1. First, parse it to see the structure
2. Change the circle's fill color to red
3. Export it as a React component named "BlueCircle"

License

MIT