Skip to main content
Glama
pchalupa

SVGR MCP Server

by pchalupa
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Local

SVGR MCP Server

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

Features

  • 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.

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

Related MCP server: MCP Figma to React Converter

API Reference

Tools

convert_svg_to_react

Converts an SVG string into a React component.

Input Schema:

Parameter

Type

Description

Default

svg

string

Required. The raw SVG content to convert.

-

componentName

string

Name for the generated React component.

"MyComponent"

options

object

Configuration options for SVGR.

{}

Options Object:

The options parameter 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 with React.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).

Return Value:

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

Example Usage:

{
  "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
    }
  }
}

Prompts

svg_to_react_native

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

Title: SVG to React Native Component

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

Arguments:

Parameter

Type

Description

svg

string

Required. SVG content or file path to SVG

Preset Options:

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

Usage:

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

Available Tools

1 tool
convert_svg_to_reactB

Convert SVG content or file to React component using SVGR

ParametersJSON Schema
NameRequiredDescriptionDefault
svgYesSVG content as string or file path to SVG file
componentNameNoName for the React component (default: MyComponent)
optionsNoSVGR configuration options

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description bears full responsibility for disclosing behavioral traits. It only states the conversion action but omits critical details such as whether the output is a string or file, error handling for invalid SVG, or any side effects. The agent cannot anticipate the tool's behavior beyond the basic conversion.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, front-loaded sentence of 10 words. Every word is necessary and the key verb 'Convert' appears first. There is no redundancy or filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (3 parameters, a nested options object with 17 sub-properties), the description is too minimal. It does not explain what SVGR does, what the output looks like, or how the options affect the conversion. The agent lacks sufficient context to effectively use the tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema provides descriptions for all parameters (100% coverage), so the baseline is 3. The description adds minimal additional meaning beyond the schema—e.g., 'SVG content as string or file path' is already in the schema. No extra semantic value is provided.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: converting SVG content or file to a React component using SVGR. It uses a specific verb ('Convert') and identifies the resource and target, leaving no ambiguity.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description does not provide any guidance on when to use this tool versus alternatives (though no siblings exist). There is no mention of prerequisites, context, or when not to use it, leaving the agent to infer from the name alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.5/5.0
Disambiguation5/5

Only one tool exists, so there is no possibility of confusion between tools. The tool's purpose is singular and well-defined.

Naming Consistency5/5

The single tool name follows a clear verb_noun pattern (convert_svg_to_react) and is descriptive of its function.

Tool Count3/5

With only one tool, the server feels minimally scoped. While the tool is not trivial, the server would benefit from additional tools (e.g., for configuration or batch processing) to better serve its domain.

Completeness4/5

The tool covers the core conversion task for both SVG content and files, but lacks options for customizing SVGR parameters or handling complex workflows. Minor gap in configurability.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/pchalupa/svgr-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server