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:

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": "",
    "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:

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.