# SVGR MCP Server

A Model Context Protocol (MCP) server that exposes [SVGR](https://react-svgr.com/) 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.

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

## 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:**

```json
{
  "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.