svg2rn-mcp/README.md

MCP server that converts SVG files to React Native components using SvgXml

# svg2rn-MCP: SVG to React Native Component Converter

This MCP server empowers AI assistants (like Cursor, Claude, and others) to convert SVG files into React Native components directly within your project. It streamlines the process of incorporating SVGs into your app by automating component generation.

**Version**: 1.0.1

## Key Features

- **AI-Friendly**: Designed for seamless integration with AI assistants.
- **Flexible Input**: Convert single SVG files or entire directories.
- **Smart Output**: Output directory is relative to input by default, or can be specified as absolute/relative.
- **Robust Path Handling**: Handles paths with spaces and provides clear error messages.
- **Automatic Naming**: Generates component names from SVG filenames (e.g., `my-icon.svg` → `MyIcon.tsx`).
- **TypeScript Ready**: Produces TypeScript-based React Native components.
- **`react-native-svg`**: Utilizes `react-native-svg` for rendering.

## Installation & Running

### Using NPX (Recommended for AI assistants)

AI assistants can run this MCP server on-demand using `npx`:

```bash
npx svg2rn-mcp@1.0.1 
```

This command downloads and runs the server, making its tools available to the AI assistant.

### Local Development

If you've cloned the repository:

1.  **Install dependencies**: `npm install`
2.  **Build the project**: `npm run build`
3.  **Run the server**: `node dist/index.js`

## MCP Configuration for AI assistants (e.g., Cursor)

To make this tool available to your AI assistant, you'll typically add a configuration to a JSON file. This might be a generic `mcp_config.json` or a specific file for your IDE (e.g., `.cursor-settings.json` in your project root for Cursor).

**Example for Cursor (add to `.cursor-settings.json` in your project, or global settings):**

If your AI assistant or IDE uses a `command` and `args` structure for defining MCP servers, you can configure it like this:

```json
{
  "aiProviders": {
    // ... other provider settings
  },
  "mcp": {
    "servers": {
      "svg-to-rn-converter": { // This is a user-defined name for the server
        "command": "npx",
        "args": [
          "-y", // Auto-confirm npx execution
          "svg2rn-mcp@1.0.1" // Use the specific version
        ],
        "description": "Converts SVG files to React Native components. Handles local project paths."
        // The tool schema will be fetched from the server dynamically.
        // If needed, you can often pre-declare tools here, but it's usually not required
        // if the server correctly implements the tools/list method.
      }
      // You can add other MCP servers here
    }
  }
}
```

**Key points for this configuration:**
*   **`svg-to-rn-converter`**: This is a custom name you choose to identify this server in your AI assistant's settings.
*   **`command`: `"npx"`**: Specifies `npx` as the command to run.
*   **`args`: `["-y", "svg2rn-mcp@1.0.1"]`**:
    *   `-y`: Automatically confirms the `npx` execution, preventing prompts.
    *   `svg2rn-mcp@1.0.1`: Specifies the package and version to run. Using a specific version ensures consistent behavior. You can also use `@latest` if you always want the newest version, but pinning to a version is safer for stability.
*   **Tool Schema**: The `convert_svg` tool schema (defining `input` and `output` parameters) is provided by the server itself when the AI assistant connects and requests `tools/list`. You generally don't need to duplicate it in the static configuration unless your specific AI assistant requires it for pre-discovery.

This setup allows your AI assistant to invoke the `svg2rn-mcp` server as needed, using `npx` to fetch and run the correct version without requiring a global installation.

## Usage with AI assistants (Cursor, Claude, etc.)

AI assistants can use the `convert_svg` tool provided by this MCP server.

**Tool: `convert_svg`**

Converts SVG file(s) to React Native components.

**Input Schema:**

```json
{
  "type": "object",
  "properties": {
    "input": {
      "type": "string",
      "description": "Path to SVG file or directory containing SVG files. Paths with spaces are handled."
    },
    "output": {
      "type": "string",
      "description": "Output directory for React Native components. Can be absolute or relative to input directory. Defaults to 'svg-components' relative to input."
    }
  },
  "required": ["input"]
}
```

**Example AI Assistant Interaction:**

You might ask your AI assistant:

> "Hey, can you convert all SVGs in the `assets/icons` directory into React Native components and place them in `src/components/icons`?"

The AI assistant would then use the `convert_svg` tool with parameters like:

```json
{
  "input": "assets/icons",
  "output": "src/components/icons" 
}
```

**Default Output Behavior:**

If `output` is not specified, components are saved to an `svg-components` directory created inside the input directory. For example, if `input` is `assets/icons`, the default output will be `assets/icons/svg-components`.

## Generated Component Example

```typescript
// Example: src/components/icons/MyIcon.tsx
import React from 'react';
import { SvgXml } from 'react-native-svg';

interface Props {
  width?: number | string;
  height?: number | string;
  [key: string]: any; 
}

const MyIcon = (props: Props) => (
  <SvgXml xml={"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">...</svg>"} {...props} />
);

export default MyIcon;
```

## Using Generated Components in Your App

1.  **Install `react-native-svg`**:
    ```bash
    npm install react-native-svg
    # or
    yarn add react-native-svg
    ```

2.  **Import and use**:
    ```typescript
    import MyIcon from './src/components/icons/MyIcon'; // Adjust path as needed
    
    // In your component
    <MyIcon width={24} height={24} fill="#000" /> 
    ```

## Testing

A comprehensive test suite is available to verify all functionalities:

```bash
node test-mcp-inspector.js 
```

This script covers various scenarios, including different path types, error handling, and output directory logic. Refer to `MCP-INSPECTOR-GUIDE.md` for more details on testing with the MCP Inspector.

## Requirements

-   Node.js 16+
-   `react-native-svg` in your React Native project (for using the generated components)