Todo desenvolvedor que já colou um SVG bruto num projeto React conhece essas dores.
SVGs brutos usam atributos com hífen como clip-rule, fill-opacity e stroke-linecap. O React exige camelCase: clipRule, fillOpacity, strokeLinecap. Esquecer um único atributo causa erros em tempo de execução ou bugs de estilo difíceis de rastrear.
Figma e Sketch exportam SVGs com cores embarcadas como fill="#3B82F6". Cada ícone vira componente de uso único. Reutilizá-lo em temas escuros, estados hover ou diferentes cores de marca exige clonar e editar manualmente.
Ferramentas de design adicionam <title>, <defs>, grupos <g> vazios e atributos redundantes em cada SVG exportado. Esse código inútil incha o bundle JSX e reduz o tempo de parse — especialmente perceptível com dezenas de ícones inline.
Cole SVG à esquerda, obtenha o componente React à direita
Seis conversões de nível produção, instantâneas, todas no navegador.
Cole qualquer SVG e o componente React aparece imediatamente. A conversão SVG para React roda como uma transformação AST no navegador — sem viagens de rede, sem latência, sem limite de tamanho de arquivo.
Ative o modo TSX e o conversor adiciona automaticamente interface IconProps extends React.SVGProps<SVGSVGElement> no topo do arquivo. Cada prop é totalmente tipada — className, atributos customizados, sem conversões forçadas.
Antes da conversão SVG para React, a ferramenta remove os <title>, <defs>, grupos vazios e atributos redundantes que Figma ou Sketch exportam, e funde e simplifica paths — reduzindo o tamanho do output SVG para React em até 60%.
Com o modo Tailwind ativo, o conversor SVG para React substitui as cores fill e stroke hardcoded por className="fill-current" e currentColor. Os ícones herdam instantaneamente a cor do texto do elemento pai, funcionando perfeitamente em qualquer tema.
Todos os atributos SVG com hífen — clip-rule, fill-opacity, stroke-linecap, xlink:href — são automaticamente renomeados para seus equivalentes camelCase do React, e class se torna className. O output SVG para React sempre é JSX válido.
Remova com um clique o width e height hardcoded do elemento SVG raiz. O componente SVG para React se dimensionará via CSS ou prop className, sendo totalmente responsivo e fácil de controlar a partir do layout pai.
Da exportação SVG bruta a um componente React pronto para colar em menos de 30 segundos.
Copie o SVG fonte do Figma, Sketch, de uma biblioteca de ícones ou de um arquivo SVG e cole-o no painel esquerdo da ferramenta SVG para React. Aceita qualquer SVG válido, incluindo ícones com múltiplos paths e ilustrações complexas.
Selecione o formato de saída e as otimizações conforme os requisitos do seu projeto. Ative TypeScript para saída TSX com props tipadas; ative SVGO para limpar o ruído do Figma antes da conversão SVG para React; ative Tailwind CSS para substituir cores hardcoded por currentColor.
O painel direito exibe o output SVG para React em tempo real enquanto você digita. Clique em Copiar para enviar o componente React para a área de transferência e cole-o diretamente no seu arquivo .jsx ou .tsx — sem ajustes de formatação necessários.
Seja construindo um sistema de design, otimizando o tamanho do bundle ou entregando ícones refinados, o conversor SVG para React se adapta ao seu fluxo de trabalho.
Cole SVG bruto à esquerda e o componente React aparece à direita em tempo real. A transformação SVG para React roda como um percurso AST puro no navegador — sem espera, sem servidor, sem limites de taxa.
Mude o output SVG para React de JSX para TSX com um clique e interface IconProps extends React.SVGProps<SVGSVGElement> é gerada automaticamente. Cada classe CSS, label aria e handler de evento é totalmente tipado, pronto para projetos Next.js ou Vite em modo estrito.
O conversor executa compressão SVGO antes da transformação SVG para React — removendo metadados do Figma, fundindo paths redundantes, reduzindo o tamanho do arquivo em até 60%. O modo Tailwind substitui as cores fill hardcoded por currentColor para que cada ícone se adapte a qualquer tema sem sobreposições CSS.
Perguntas comuns sobre a conversão de SVG para componentes React, props TypeScript e otimização SVG.
SVG para React significa transformar arquivos SVG brutos — exportados do Figma, Sketch ou de uma biblioteca de ícones — em componentes de função React reutilizáveis. O markup SVG se torna JSX, atributos com hífen viram camelCase, e o componente aceita props como className, width e aria-label.
Inlinar SVG como componente React permite controlar fill e stroke via CSS, animar paths individuais com Framer Motion, adicionar labels ARIA para acessibilidade e fazer tree-shake de ícones não utilizados em tempo de build. A tag <img> trata o SVG como imagem opaca, sem oferecer nenhuma dessas capacidades.
Sim. Ative o interruptor TypeScript e o output SVG para React muda do formato .jsx para .tsx. O conversor gera automaticamente interface IconProps extends React.SVGProps<SVGSVGElement> no topo do arquivo, dando cobertura de tipos completa a cada prop.
A ferramenta SVG para React trata todos os atributos com hífen conhecidos: clip-rule → clipRule, fill-opacity → fillOpacity, stroke-linecap → strokeLinecap, stroke-linejoin → strokeLinejoin, stroke-width → strokeWidth, xlink:href → href, class → className. O output sempre é JSX válido.
Antes da transformação SVG para React, a ferramenta executa um percurso SVGO em JavaScript no navegador, removendo os <title>, <desc>, <defs>, elementos <g> vazios e atributos de apresentação redundantes adicionados pelas ferramentas de design, fundindo e simplificando paths para produzir um componente React mais leve.
Com o modo Tailwind ativo, o conversor SVG para React substitui os atributos fill="#hex" e stroke="#hex" hardcoded por fill="currentColor" e stroke="currentColor", e adiciona className="fill-current" ao elemento <svg> raiz. Os ícones herdam instantaneamente as classes text-color do pai, facilitando o modo escuro e a troca de temas.
Não. Toda a conversão SVG para React é processada dentro do motor JavaScript do navegador. O SVG fonte nunca sai do seu dispositivo. Sem backend, sem uploads, sem logs, sem limites de taxa.
Sim, embora SVGs muito grandes (centenas de paths) possam demorar um pouco mais para processar. A ferramenta SVG para React suporta ícones com múltiplos paths, clip paths, gradientes, máscaras e grupos aninhados. Para ilustrações extremamente complexas, considere dividi-las em componentes menores para melhor desempenho de renderização no React.
100% gratuito · Sem cadastro · Sem uploads · Suporte offline
