SVGR

Servidor MCP SVGR

Um servidor Model Context Protocol (MCP) que expõe a funcionalidade do SVGR para converter conteúdo SVG em componentes React.

Recursos

• Conversão de SVG para React: Transforma strings SVG brutas em componentes React válidos.
• Saída Configurável: Suporta amplas opções de configuração do SVGR, incluindo geração de TypeScript, suporte a React Native e formatação com Prettier.
• Otimização: Integração opcional com SVGO para otimizar o conteúdo SVG antes da conversão.

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

Referência da API

Ferramentas

convert_svg_to_react

Converte uma string SVG em um componente React.

Esquema de Entrada:

Parâmetro	Tipo	Descrição	Padrão
svg	string	Obrigatório. O conteúdo SVG bruto a ser convertido.	-
componentName	string	Nome para o componente React gerado.	"MyComponent"
options	object	Opções de configuração para o SVGR.	{}

Objeto de Opções:

O parâmetro options suporta as seguintes chaves:

• icon (boolean | string | number): Substitui largura e altura do SVG por um valor personalizado.
• native (boolean): Modifica todos os nós SVG para React Native.
• typescript (boolean): Gera componente TypeScript.
• dimensions (boolean): Mantém os atributos de largura e altura da tag SVG raiz.
• expandProps ("start" | "end" | boolean): Encaminha propriedades para a tag SVG.
• prettier (boolean): Formata a saída com Prettier.
• prettierConfig (object): Especifica configuração personalizada do Prettier.
• svgo (boolean): Usa SVGO para otimizar o código SVG.
• ref (boolean): Adiciona suporte a ref no componente.
• memo (boolean): Envolve o componente com React.memo.
• replaceAttrValues (object): Mapa de valores de atributos a serem substituídos.
• svgProps (object): Adiciona props à tag SVG raiz.
• titleProp (boolean): Adiciona suporte à prop title.
• descProp (boolean): Adiciona suporte à prop description.
• jsxRuntime ("classic" | "automatic" | "classic-preact"): Especifica o runtime JSX a ser usado.
• exportType ("named" | "default"): Especifica o tipo de exportação (nomeada ou padrão).

Valor de Retorno:

Retorna um bloco de conteúdo de texto contendo o código do componente React gerado.

Exemplo 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

Um prompt de conveniência que converte SVG em um componente React Native com configurações recomendadas.

Título: SVG para Componente React Native

Descrição: Converte SVG em componente React Native com TypeScript e exportação nomeada

Argumentos:

Parâmetro	Tipo	Descrição
svg	string	Obrigatório. Conteúdo SVG ou caminho do arquivo SVG

Opções Predefinidas:

Este prompt aplica automaticamente as seguintes opções:

• native: true - Gera componentes compatíveis com React Native
• typescript: true - Gera código TypeScript
• jsxRuntime: automatic - Usa o runtime JSX automático
• exportType: named - Usa exportações nomeadas

Uso:

Este prompt orienta o assistente a usar a ferramenta convert_svg_to_react com configurações específicas para React Native, facilitando a geração de componentes prontos para dispositivos móveis sem especificar manualmente todas as opções.