MCP server for converting SVG to React components using SVGR
MCP server for converting SVG to React components using SVGR. That is what the svgr mcp mcp server brings to an AI assistant: the same capability, reachable through the Model Context Protocol rather than a separate app or dashboard.
A Model Context Protocol (MCP) server that exposes SVGR functionality to convert SVG content into React components.
The server publishes 4 tools. What each one is for:
Tools — The Tools tool exposed by this serverconvert_svg_to_react — Returns a text content block containing the generated React component codePrompts — The Prompts tool exposed by this serversvg_to_react_native — A convenience prompt that converts SVG to a React Native component with recommended settingsSetup follows the usual MCP pattern — install or clone the server, register it in your client's configuration file, restart the client. The configuration blocks on this page cover the common clients.
Among the developer tooling options, the useful question is rarely "what can it do" but "what does it cost you to run" — permissions, credentials, and how much of your context its toolset consumes. Svgr MCP's toolset — Tools, convert_svg_to_react, Prompts and 1 more — is a fair guide to whether it matches your workflow. It is maintained by pchalupa; worth a glance at recent repository activity before you build anything load-bearing on it.
This entry was verified against Svgr MCP's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.
| Tool | What it does |
|---|---|
| Tools | The Tools tool exposed by this server. |
| convert_svg_to_react | Returns a text content block containing the generated React component code. |
| Prompts | The Prompts tool exposed by this server. |
| svg_to_react_native | A convenience prompt that converts SVG to a React Native component with recommended settings. |
{
"mcpServers": {
"svgr": {
"command": "npx",
"args": ["svgr-mcp@latest"],
"type": "stdio"
}
}
}Configuration as documented by the project. Restart the client after saving.
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.