SVGR

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

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

Converts an SVG string into a React component.

Theoptionsparameter 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 withReact.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).

Returns a text content block containing the generated React component code.

{ "name": "convert_svg_to_react", "arguments": { "svg": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"20\"/></svg>", "componentName": "CircleIcon", "options": { "typescript": true, "icon": true } } }

A convenience prompt that converts SVG to a React Native component with recommended settings.

Description:Convert SVG to React Native component with TypeScript and named export

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

This prompt guides the assistant to use theconvert_svg_to_reacttool with React Native-specific configurations, making it easier to generate mobile-ready components without manually specifying all options.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

Get access to MCP server SVG and MCP server PNG icons in your vibe-coding projects

745+ CSS3 animations and 9,000+ real SVG icons for AI coding agents. 10 MCP tools. Zero-clone setup via npx.

Create, validate, and render diagrams from D2 (Declarative Diagramming) code into SVG and PNG formats.

Extract and download usable website favicons and return direct icon URLs and metadata through an MCP server.

Renders Mermaid diagram syntax to PNG or SVG images with configurable themes and backgrounds.

Quickly retrieve SVGs using the Iconify API, with no external data files required.

Provides access to the Lucide icon library for use in LLM and agentic applications.

Search open SVG icon packs and fetch exact SVG markup from coding agents through MCP.

Render chart images from JSON configs with six themes, ten marks, PNG/SVG output.