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:

npx [email protected] 

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:

{
  "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
          "[email protected]" // 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", "[email protected]"]:
  • -y: Automatically confirms the npx execution, preventing prompts.
  • [email protected]: 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:

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

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

// 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:

   npm install react-native-svg
   # or
   yarn add react-native-svg

2. Import and use:

   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:

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)