Anúncios incomodam? Ir Sem anúncios Hoje 

Conversor de SVG para Componente JSX do React

DesenvolvedorTexto

ANUNCIADO Remover?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Conversor de SVG para Componente JSX React

Conversor de SVG para Componente JSX do React

Cole o markup bruto do SVG e obtenha de volta um componente funcional React limpo. A ferramenta aplica conversão determinística para camelCase para cada atributo, remove sintaxe não-JSX e envolve a saída em um componente pronto para importação — opcionalmente tipado, opcionalmente forwardRef-envolvido e opcionalmente redimensionado via propriedades. Tudo funciona localmente no seu navegador, então seus ícones e logotipos nunca saem da sua máquina.

Como usar

Cole o completo <svg>…</svg> markup no campo de entrada.
Defina um nome de componente (PascalCase, como ArrowRightIcon).
Alternar TypeScript, forwardRef, propriedades de tamanho escalável e distribuição de propriedades para se adaptar ao seu projeto.
Copie o JSX gerado ou baixe-o como um .tsx / .jsx arquivo.

Características

atributos camelCase – stroke-width torna-se strokeWidth, fill-rule torna-se fillRule, e assim por diante, ao longo da especificação completa do SVG.
Tratamento de palavras reservadas – class é reescrita para className, for para htmlFore, e xlink:href para xlinkHref.
Parser de estilo inline – style="color: red; font-size: 12px" é convertido para um objeto de estilo JSX com chaves camelCase.
Saída em TypeScript – gera React.SVGProps<SVGSVGElement> tipagens quando habilitado.
Modo de ícone escalável – substitui a largura/altura fixa por width e height propriedades com valores padrão sensatos.
Envolver com forwardRef – emite um React.forwardRef componente com um displayName para o DevTools.
Distribuição de propriedades – passa propriedades arbitrárias para a raiz <svg> para que os consumidores possam definir className, ARIA ou manipuladores de eventos.
Offline por design – o SVG nunca sai do navegador; sem uploads, sem viagens para o servidor.

 Perguntas frequentes

Por que React e JSX reescrevem os nomes dos atributos do SVG?

O JSX compila diretamente para acesso a propriedades de objetos em JavaScript, e os identificadores de JavaScript não podem conter hífens. React, portanto, padroniza o uso de nomes camelCase para propriedades, que correspondem à especificação do DOM IDL — por exemplo, stroke-width torna-se strokeWidth porque o DOM o expõe como element.strokeWidth. Uma pequena quantidade de atributos (class, for) colidem com palavras reservadas em JavaScript e são renomeados (className, htmlFor) para evitar conflitos com o parser.
O que faz React.forwardRef para um componente SVG?

Por padrão, um componente funcional não pode receber um ref do seu pai — o React o ignora silenciosamente. React.forwardRef expose a node DOM subjacente ao pai, o que é essencial quando você precisa de acesso direto ao renderizado <svg> para gerenciamento de foco, medição ou integração com bibliotecas de animação como Framer Motion ou GSAP.
Por que os SVGs devem ser embutidos como componentes React em vez de imagens inline?

Embutar SVG como JSX dá você controle total sobre a árvore DOM: você pode theme traços e preenchimentos via variáveis CSS, animar caminhos individuais, trocar cores em tempo real e eliminar ícones não usados no momento de build. Um <img src="icon.svg"> comporta-se como um elemento raster opaco — você não pode estilizar seus internos da página hospedeira.
Por que manter largura e altura como propriedades em vez de atributos fixos?

Dimensões fixas em pixels prendem o ícone em um único tamanho e tornam difícil compor dentro de um layout. Expor width e height como propriedades (frequentemente combinado com o original viewBox) permite que os consumidores renderizem o mesmo componente em 16px em uma barra de ferramentas e em 48px em um banner de destaque, com a escala vetorial do SVG preservando a clareza em todos os tamanhos.