Conversor SVG para JSX/React

Converta SVG em componentes React/JSX de forma instantânea. Transforma atributos SVG para a sintaxe camelCase do JSX.

Component:

Wrap as Component

SVG

JSX / React

Sobre a conversão de SVG para JSX

SVG usado diretamente em React requer a conversão de atributos com hífens para camelCase (stroke-width para strokeWidth, fill-rule para fillRule) e a renomeação de atributos como class para className. Esta ferramenta automatiza todas essas transformações, gerando componentes React prontos para uso.

𝕏 Twitter in LinkedIn

Avalie esta ferramenta

4.8 / 5 · 55 avaliações

More Tools

JSXHTML para JSX TWCSS para Tailwind 🖼️Image Base64 Converter JSJS/HTML Formatter

Fique atualizado

Receba dicas de dev e novos ferramentas semanalmente.

Sem spam. Cancele a qualquer momento.

Enjoy these free tools?

☕Buy Me a Coffee

Como Usar

Cole seu código SVG no campo de entrada
O componente JSX/React é gerado automaticamente
Escolha entre JSX inline ou componente React completo
Copie o resultado e importe no seu projeto React

Casos de Uso Comuns

Converter ícones SVG em componentes React reutilizáveis
Migrar assets SVG para projetos React/Next.js
Criar bibliotecas de ícones em React a partir de SVGs
Incorporar ilustrações SVG diretamente em componentes JSX

Perguntas Frequentes

Quais atributos SVG são convertidos?

Todos os atributos com hífens são convertidos para camelCase (stroke-width → strokeWidth, clip-path → clipPath), class é renomeado para className, e estilos inline são convertidos para objetos JavaScript.

A ferramenta gera componentes React completos?

Sim. Você pode optar por gerar apenas o JSX inline ou um componente React funcional completo com exportação.

SVGs complexos são suportados?

Sim. A ferramenta lida com SVGs complexos incluindo gradientes, filtros, animações, grupos e elementos aninhados.

É seguro converter meus SVGs aqui?

Sim. Todo o processamento ocorre no seu navegador. Seus arquivos SVG nunca são enviados para nenhum servidor.