Conversor SVG para Componente React
Cole ou envie qualquer SVG e obtenha um componente React limpo de volta, com atributos em camelCase, um spread de props na raiz e uma assinatura TypeScript opcional. Grátis, privado e instantâneo.
Solte seu SVG aqui ou clique para enviar
Aceita arquivos .svg ou cole o código SVG abaixo
Por Que Converter SVG para React Aqui
JSX Limpo em camelCase
Cada atributo SVG é renomeado para React: class vira className, stroke-width vira strokeWidth e clip-path vira clipPath, então o componente compila sem avisos.
Estilos Inline como Objetos
Um atributo style como fill:red;stroke-width:2 vira um objeto style React adequado, com chaves em camelCase e prefixos de vendor em maiúscula, em vez de uma string que o React rejeita.
Spread de Props na Raiz
O SVG raiz recebe um spread {...props} após seus próprios atributos, permitindo que quem usa o componente passe className, width, height ou onClick e sobrescreva os padrões.
TypeScript ou JavaScript
Alterne um botão para emitir um componente tipado com React.SVGProps<SVGSVGElement>, ou mantenha em JavaScript simples. Dê ao componente o nome que quiser.
Atributos com Namespace Corrigidos
xlink:href vira xlinkHref e xml:space vira xmlSpace, enquanto atributos data-* e aria-* são preservados intocados, mantendo gradientes, máscaras e acessibilidade funcionando.
100% Privado e Gratuito
A conversão roda inteiramente no seu navegador usando o parser nativo. Seu SVG nunca é enviado, não há cadastro e não há limites.
Como Converter SVG para um Componente React
Adicione seu SVG
Arraste e solte um arquivo .svg, clique para procurar, ou cole seu código SVG na caixa.
Defina as opções
Dê nome ao componente, ative TypeScript se quiser uma assinatura tipada, e escolha se deseja fazer spread de props no SVG raiz.
Obtenha JSX limpo
O conversor renomeia class para className, converte cada atributo para camelCase, transforma estilos inline em objetos style e corrige atributos com namespace como xlink:href.
Copie e cole
Clique em copiar e insira o componente direto no seu projeto React, Next.js ou TypeScript. Sem etapa de build, sem dependência.
Escolha a ferramenta certa
Por que esta página existe
Use the SVG to React converter when you need a vector as a real component, not a static asset. It camelCases every attribute, turns inline styles into a style object, spreads props on the root, and can emit TypeScript.
Melhor para
- Turning Figma, Illustrator, or Inkscape icons into JSX components
- Building an icon set where each SVG accepts className, size, and color props
- Inlining a logo as a component instead of an img tag or background
Ferramentas relacionadas que geralmente são necessárias em seguida
Perguntas Frequentes sobre SVG para React
Cole seu código SVG ou envie um arquivo .svg, e a ferramenta retorna um componente React pronto para uso. Ela renomeia atributos para camelCase, converte estilos inline em objetos style, faz spread de props na raiz e permite definir o nome do componente e alternar TypeScript. Copie a saída para seu projeto e importe como qualquer outro componente.
JSX não é HTML. React espera className em vez de class, atributos em camelCase como strokeWidth em vez de stroke-width, e um objeto style em vez de uma string style. Um SVG puro colado em JSX normalmente gera erro ou não renderiza nada — exatamente o que este conversor resolve para você.
Sim. Ative o botão TypeScript e o componente será tipado com props: React.SVGProps<SVGSVGElement> e uma importação React, pronto para cair em um arquivo .tsx. Deixe desativado para saída em JavaScript simples.
Com o spread ativado, o SVG raiz termina com {...props}, posicionado após seus próprios atributos. Isso permite que quem usa o componente passe className, width, height, fill ou manipuladores de evento e sobrescreva os padrões — como a maioria das bibliotecas de ícones funciona.
Não. A conversão acontece inteiramente no seu navegador usando o parser SVG nativo. Nada é enviado a nenhum lugar, então é seguro usar com ativos de marca privados e ícones proprietários.
Conversor SVG para Componente React
Cole ou envie qualquer SVG e obtenha um componente React limpo de volta, com atributos em camelCase, um spread de props na raiz e uma assinatura TypeScript opcional. Grátis, privado e instantâneo.