Which integrations are available for this server?

Supports Preact JSX runtime for generating Preact-compatible components from SVG content. Enables automatic formatting of generated React component code with configurable Prettier options. Transforms SVG strings into React components with support for React Native, props forwarding, ref support, and React.memo wrapping. Converts SVG content into React components with configurable options for TypeScript generation, optimization, and formatting. Provides optional SVG optimization through SVGO integration before converting to React components. Supports generation of TypeScript React components from SVG content.

How do I use SVGR MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@SVGR MCP Server convert this SVG to a TypeScript React component named LogoIcon" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

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.

{
  "mcpServers": {
    "svgr": {
      "command": "npx",
      "args": ["svgr-mcp@latest"],
      "type": "stdio"
    }
  }
}

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.
exportType ("named" | "default"): Specify export type (named or default).

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
    }
  }
}

Prompts

`svg_to_react_native`

A convenience prompt that converts SVG to a React Native component with recommended settings.

Title: SVG to React Native Component

Description: Convert SVG to React Native component with TypeScript and named export

Arguments:

Parameter	Type	Description
`svg`	`string`	Required. SVG content or file path to SVG

Preset Options:

This prompt automatically applies the following options:

native: true - Generates React Native compatible components
typescript: true - Outputs TypeScript code
jsxRuntime: automatic - Uses the automatic JSX runtime
exportType: named - Uses named exports

Usage:

This prompt guides the assistant to use the convert_svg_to_react tool with React Native-specific configurations, making it easier to generate mobile-ready components without manually specifying all options.