SVGR

Exposes SVGR functionality to convert SVG content into React components via an MCP server.

typescript

0

GitHub Stars

typescript

Language

6 months ago

First Indexed

3 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

SVGR MCP Server exposes SVGR functionality through a Model Context Protocol (MCP) server, letting you convert SVG content into React components on demand. This enables you to automate SVG-to-component workflows, apply SVGR options, and integrate optimized SVG assets into your React projects via a consistent MCP interface.

How to use

You interact with the SVGR MCP Server through an MCP client that connects to the stdio MCP endpoint defined for the server. Use the server to convert raw SVG strings into React components by calling the convert_svg_to_react tool with your SVG content and a desired component name. You can tailor the output with configuration options such as TypeScript generation, React Native adjustments, and optional SVGO optimization. This workflow fits into build pipelines or tooling that orchestrates code generation from vector graphics.

How to install

Prerequisites: install Node.js (version 14 or newer) and npm on your machine.

Create a local MCP run configuration using the provided MCP server entry. The SVGR MCP Server is exposed as a stdio MCP server with the following runtime configuration.

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

Starting the SVGR MCP Server

Run the provided command to start the SVGR MCP Server locally. This starts the stdio MCP server that your MCP client can connect to for SVG-to-React component conversion.

npx svgr-mcp@latest

Available tools

convert_svg_to_react

Converts an SVG string into a React component. Accepts an SVG string, a component name, and an options object to customize generation (TypeScript, native, SVGO, Prettier, and more). Returns the generated component as text.