Conversor de SVG para React/JSX

O Conversor de SVG para React JSX transforma arquivos SVG brutos em componentes React reutilizáveis. Ele foi criado para desenvolvedores que precisam de componentes de ícones mais limpos, marcas de empresas, ilustrações de produtos e recursos de sistemas de design sem precisar corrigir manualmente cada atributo SVG. Cole a marcação SVG ou faça o upload de um arquivo .svg em UTF-8, escolha as opções de React que você precisa e, em seguida, copie o componente gerado para o seu projeto.

Como Usar

1. Colar ou fazer upload do SVG. Cole um arquivo SVG completo no editor ou faça o upload de um arquivo .svg em UTF-8.
2. Nomear o componente. Insira um nome de componente React em PascalCase, como AlertIcon ou BrandMark.
3. Escolher as opções do React. Selecione as opções de TypeScript, forwardRef, React.memo, acessibilidade de título, conversão de estilo, sanitização e propagação de props.
4. Converter para JSX. Clique em Converter para Componente React para gerar o código JSX pronto para cópia.
5. Revisar e copiar. Revise o resumo da conversão, os avisos e o código gerado antes de copiá-lo para o seu projeto React.

O que o Conversor Trata

Dicas para Melhores Componentes SVG no React

Mantenha o viewBox original sempre que possível, pois ele controla como o SVG é dimensionado. Para sistemas de ícones, width="1em" e height="1em" permitem que o ícone herde o tamanho do texto, ao mesmo tempo que permitem que os chamadores substituam as dimensões por meio de props. Use um nome de componente descritivo em PascalCase, mantenha os SVGs decorativos acessíveis com aria-hidden quando apropriado e use a prop title para ícones significativos que comunicam informações.

FAQ

O que este conversor de SVG para React altera?

Ele analisa o XML do SVG e reescreve os atributos do SVG em JSX amigável para o React, incluindo className, atributos SVG em camelCase, objetos de estilo opcionais, props, forwardRef, acessibilidade de título e sintaxe de exportação.

Posso fazer upload de um arquivo SVG?

Sim. Você pode fazer upload de um arquivo .svg em UTF-8 ou colar a marcação SVG. Os arquivos enviados são lidos como texto e convertidos em JSX no servidor.

Ele sanitiza o código SVG?

A sanitização está ativada por padrão. O conversor remove tags de script, manipuladores de eventos inline e links javascript: para que o componente gerado seja mais seguro de revisar antes do uso.

Por que converter atributos de estilo em objetos?

O React espera que a prop style seja um objeto ao escrever JSX. A conversão de strings de estilo em objetos faz com que a saída seja compilada de forma limpa e mantém os nomes das propriedades CSS em camelCase.

Qual é o melhor formato de nome de componente?

Use PascalCase, como AlertIcon ou BrandMark. O conversor limpa caracteres inválidos e garante que o resultado comece com um identificador de componente React válido.