SVGR

Servidor MCP SVGR

Un servidor de Protocolo de Contexto de Modelo (MCP) que expone la funcionalidad de SVGR para convertir contenido SVG en componentes de React.

Características

• Conversión de SVG a React: Transforma cadenas SVG sin procesar en componentes React válidos.
• Salida configurable: Admite amplias opciones de configuración de SVGR, incluida la generación de TypeScript, la compatibilidad con React Native y el formato Prettier.
• Optimización: Integración opcional de SVGO para optimizar el contenido SVG antes de la conversión.

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

Referencia de API

Herramientas

convert_svg_to_react

Convierte una cadena SVG en un componente React.

Esquema de entrada:

Parámetro	Tipo	Descripción	Predeterminado
svg	string	Requerido. El contenido SVG sin procesar que se va a convertir.	-
componentName	string	Nombre para el componente React generado.	"MyComponent"
options	object	Opciones de configuración para SVGR.	{}

Objeto de opciones:

El parámetro options admite las siguientes claves:

• icon (boolean | string | number): Reemplaza el ancho y alto del SVG con un valor personalizado.
• native (boolean): Modifica todos los nodos SVG para React Native.
• typescript (boolean): Genera un componente TypeScript.
• dimensions (boolean): Mantiene los atributos de ancho y alto de la etiqueta SVG raíz.
• expandProps ("start" | "end" | boolean): Reenvía propiedades a la etiqueta SVG.
• prettier (boolean): Formatea la salida con Prettier.
• prettierConfig (object): Especifica una configuración personalizada de Prettier.
• svgo (boolean): Usa SVGO para optimizar el código SVG.
• ref (boolean): Agrega soporte de ref al componente.
• memo (boolean): Envuelve el componente con React.memo.
• replaceAttrValues (object): Mapa de valores de atributos para reemplazar.
• svgProps (object): Agrega props a la etiqueta SVG raíz.
• titleProp (boolean): Agrega soporte para la prop title.
• descProp (boolean): Agrega soporte para la prop description.
• jsxRuntime ("classic" | "automatic" | "classic-preact"): Especifica el runtime de JSX a utilizar.
• exportType ("named" | "default"): Especifica el tipo de exportación (nombrada o predeterminada).

Valor de retorno:

Devuelve un bloque de contenido de texto que contiene el código del componente React generado.

Ejemplo de uso:

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

Un prompt de conveniencia que convierte SVG a un componente React Native con configuraciones recomendadas.

Título: Componente SVG a React Native

Descripción: Convierte SVG a un componente React Native con TypeScript y exportación nombrada

Argumentos:

Parámetro	Tipo	Descripción
svg	string	Requerido. Contenido SVG o ruta de archivo al SVG

Opciones preestablecidas:

Este prompt aplica automáticamente las siguientes opciones:

• native: true - Genera componentes compatibles con React Native
• typescript: true - Genera código TypeScript
• jsxRuntime: automatic - Usa el runtime automático de JSX
• exportType: named - Usa exportaciones nombradas

Uso:

Este prompt guía al asistente para usar la herramienta convert_svg_to_react con configuraciones específicas de React Native, lo que facilita la generación de componentes listos para dispositivos móviles sin especificar manualmente todas las opciones.