Gratuito DevTools

SVG para React Component

Converta SVG para componente React JSX com atributos camelCase. Suporte a TypeScript, React.memo e props spreading. Resultado instantaneo no navegador.

2.8k usuarios Atualizado em Mar 2026 4.8/5

Avalie esta ferramenta:

4.8 (534 votos) Obrigado!

SVG → React Component

Nome:

TypeScript React.memo Substituir por currentColor Props spreading (...props)

SVG de entrada

Previa SVG

Componente React

O componente aparecera aqui...

Como Usar

Converta SVG para React em segundos.

Cole o SVG

Insira o codigo SVG no editor da esquerda ou clique em Exemplo.

Configure as opcoes

Defina o nome do componente e ative TypeScript ou React.memo se desejar.

Veja o componente

O componente React e gerado automaticamente com atributos JSX corretos.

Copie o codigo

Clique em Copiar e cole no seu projeto React ou Next.js.

Sobre o Conversor SVG para React

Esta ferramenta converte SVG bruto em componente React funcional com todos os atributos convertidos para o formato JSX correto (camelCase).

Conversoes realizadas:

class → className, for → htmlFor
stroke-width → strokeWidth, fill-rule → fillRule, etc.
Substituicao de cores fixas por currentColor (opcional)
Props spreading com {...props} para customizacao (opcional)
Interface TypeScript com React.SVGProps<SVGSVGElement> (opcional)
Wrapping com React.memo() para otimizacao (opcional)

Artigo

SVG no React: Como Converter Corretamente e Boas Praticas de Uso

Por Equipe Chipak • Atualizado em Mar 2026 • 6 min de leitura

Neste artigo

JSX e atributos SVG
currentColor e theming
Props spreading
SVG com TypeScript
Alternativas: SVGR e Vite
Perguntas frequentes

1. JSX e Atributos SVG

O principal motivo para converter SVG antes de usar no React e que JSX nao aceita atributos com hifens — uma convencao do HTML/SVG que colide com a sintaxe JavaScript. Exemplos: stroke-width deve se tornar strokeWidth, fill-rule deve se tornar fillRule. Alem disso, class vira className. Usar SVG diretamente sem essa conversao gera erros ou warnings no console.

2. currentColor e Theming

Substituir cores fixas (como #3b82f6 ou black) por currentColor permite que o icone herde a cor do texto do elemento pai via CSS. Isso e essencial para icones que precisam mudar de cor em diferentes contextos (botoes, links, dark mode) sem precisar de props adicionais.

"Usar currentColor e a forma mais elegante de tornar icones SVG customizaveis em um design system React — sem props de cor ou temas complexos."

3. Props Spreading

Adicionar {...props} ao elemento SVG permite passar qualquer atributo SVG diretamente ao componente: width, height, className, aria-label, etc. Isso torna o componente muito mais flexivel sem adicionar props manualmente.

4. SVG com TypeScript

Com TypeScript, o tipo correto para props de um componente SVG e React.SVGProps<SVGSVGElement>. Isso garante type-safety completo: autocomplete de atributos SVG, verificacao de tipos em tempo de compilacao e melhor experiencia no editor.

5. Alternativas: SVGR e Vite

Para projetos com muitos icones, use o SVGR com Vite ou webpack. Com a configuracao correta, voce pode importar SVGs diretamente como componentes: import Icon from './icon.svg'. Mas para icones isolados ou uso pontual, nosso conversor online e mais rapido.

6. Perguntas Frequentes

Devo usar SVG inline ou como img?

SVG inline (componente React) permite estilizacao via CSS e currentColor. Como <img>, e mais simples mas nao e estilizavel. Para icones de UI, inline e o padrao. Para imagens decorativas complexas, <img> pode ser preferivel.

Por que usar React.memo em icones?

Icones raramente mudam de render para render. React.memo evita re-renders desnecessarios quando as props nao mudam, otimizando componentes que usam muitos icones em listas ou grids.

O SVG colado e armazenado?

Nao. Toda a conversao acontece localmente no seu navegador via JavaScript. Nenhum dado e enviado a servidores.

O conversor funciona com SVGs complexos?

Sim, para a maioria dos SVGs. SVGs com filtros feColorMatrix ou atributos muito especificos podem precisar de ajuste manual, mas a conversao de atributos camelCase e currentColor funciona em praticamente todos os casos.