Which integrations are available for this server?

Supports [Preact](/mcp/servers/integrations/preact) JSX runtime for generating Preact-compatible components from SVG content. Enables automatic formatting of generated React component code with configurable [Prettier](/mcp/servers/integrations/prettier) options. Transforms SVG strings into [React](/mcp/servers/integrations/react) components with support for React Native, props forwarding, ref support, and React.memo wrapping. Converts [SVG](/mcp/servers/integrations/svg) content into React components with configurable options for TypeScript generation, optimization, and formatting. Provides optional SVG optimization through [SVGO](/mcp/servers/integrations/svgo) integration before converting to React components. Supports generation of [TypeScript](/mcp/servers/integrations/typescript) React components from SVG content.

SVGR MCP Server

A Model Context Protocol (MCP) server that exposes SVGR functionality to convert SVG content into React components.

Features

SVG to React Conversion: Transforms raw SVG strings into valid React components.
Configurable Output: Supports extensive SVGR configuration options including TypeScript generation, React Native support, and Prettier formatting.
Optimization: Optional SVGO integration for optimizing SVG content before conversion.

Installation

Prerequisites

Node.js (v20 or higher)
pnpm

Build

Clone the repository.
Install dependencies and build the project:

pnpm install pnpm run build

Configuration

To use this server with Claude Desktop, add the following configuration to your claude_desktop_config.json:

{ "mcpServers": { "svgr": { "command": "node", "args": ["/absolute/path/to/svgr-mcp/build/index.js"] } } }

Note: Replace

API Reference

Tools

`convert_svg_to_react`

Converts an SVG string into a React component.

Input Schema:

Parameter	Type	Description	Default
`svg`	`string`	Required . The raw SVG content to convert.	-
`componentName`	`string`	Name for the generated React component.	`"MyComponent"`
`options`	`object`	Configuration options for SVGR.	`{}`

Options Object:

The options parameter supports the following keys:

icon (boolean | string | number): Replace SVG width and height with a custom value.
native (boolean): Modify all SVG nodes for React Native.
typescript (boolean): Generate TypeScript component.
dimensions (boolean): Keep width and height attributes from the root SVG tag.
expandProps ("start" | "end" | boolean): Forward properties to the SVG tag.
prettier (boolean): Format output with Prettier.
prettierConfig (object): Specify custom Prettier configuration.
svgo (boolean): Use SVGO to optimize SVG code.
ref (boolean): Add ref support to the component.
memo (boolean): Wrap component with React.memo.
replaceAttrValues (object): Map of attribute values to replace.
svgProps (object): Add props to the root SVG tag.
titleProp (boolean): Add title prop support.
descProp (boolean): Add description prop support.
jsxRuntime ("classic" | "automatic" | "classic-preact"): Specify the JSX runtime to use.

Return Value:

Returns a text content block containing the generated React component code.

Example Usage:

{ "name": "convert_svg_to_react", "arguments": { "svg": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"20\"/></svg>", "componentName": "CircleIcon", "options": { "typescript": true, "icon": true } } }