Svgr MCP Server

MCP server for converting SVG to React components using SVGR

Local serverstdioTypeScript

What is the Svgr MCP Server?

MCP server for converting SVG to React components using SVGR

The short version

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

  • 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

Recorded tools

  • convert_svg_to_react — Returns a text content block containing the generated React component code.
  • svg_to_react_native — A convenience prompt that converts SVG to a React Native component with recommended settings.

More MCP options

Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.

Recorded tools

Check the linked publisher documentation and your connected client's tool list. Names and availability can vary with the server version and account permissions.

ToolWhat it does
convert_svg_to_react

How to install the Svgr MCP Server

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

From the project documentation. Replace placeholders and example paths before connecting.

Example prompts to try

  • “Use Svgr MCP to Tools.”
  • “Use Svgr MCP to convert svg to react.”
  • “Use Svgr MCP to Prompts.”

Frequently asked questions

MCP server for converting SVG to React components using SVGR Confirm the tools offered by your installed version in the connected client. Tool availability and permissions depend on the server and account configuration.