convert_svg_to_react
Convert SVG content or file to React component using SVGR
LABSCO SUMMARY
Icon files stop being a manual conversion step.
One tool, but it carries SVGR's whole option surface, so what comes back is already in your project's dialect — typed or not, memoised or not, formatted the way the repository formats things. The paste-and-clean-up pass disappears.
What it is
A single-tool MCP server that runs SVGR. Hand it raw SVG and it returns React component source, with SVGR's configuration surface exposed so the output matches your project.
What you get
- Raw SVG converted into a React component, returned as code
- The component name set by you
- TypeScript output, React Native output, or plain JSX
- Props forwarded to the SVG tag, ref support, title and description props, and a React.memo wrapper
- Attribute values remapped and props added to the root SVG tag
- SVGO optimisation before conversion and Prettier formatting after
Requirements
npx on your PATH. No account and no key.
Setup effort
One command — npx svgr-mcp@latest
USE CASES
01
Adding an icon a designer just sent you
Paste the SVG, name the component, take the JSX back. The tidying you would otherwise do by hand — attribute renaming, prop forwarding — is a configuration option rather than an edit.
02
Keeping a TypeScript codebase typed
Ask for TypeScript output and the component arrives with its types, so it drops in without a follow-up pass to satisfy the compiler.
03
Sharing an icon set with a React Native app
The native option rewrites every SVG node for React Native, which is the part that makes a web icon unusable on mobile if you do it by hand.
04
Shrinking an icon before it ships
Run SVGO over the source first and Prettier over the result, so what lands in the repository is both smaller and formatted like everything around it.
1 tool
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
BEFORE YOU INSTALL
What to know first
Tools you get
1 tool when we connected.
Requires
npx on PATH
CONTEXT COST
Light Standing cost
Rated by the size of the one tool definition that rides along on every turn
INSTALLATION
Connect your client
Add the block to your client, or run the command directly.
Server setup
Configuration file
JSON
{
"mcpServers": {
"svgr-mcp": {
"command": "npx",
"args": [
"svgr-mcp@latest"
]
}
}
}npx
TERMINAL
npx svgr-mcp@latest
