Conversor de SVG para JSX
Cole um SVG e receba um componente React, React Native, Vue ou Svelte limpo, pronto para copiar para o seu projeto.
- Sem upload
- Funciona offline
- Grátis, sem cadastro
- Seus arquivos não saem do navegador
Solte arquivos SVG aqui
ou cole código SVG no editor. Você pode abrir vários arquivos de uma vez.
Seu SVG fica neste dispositivo. Nada é enviado.
Como usar o Conversor de SVG para JSX
- 1
Cole seu SVG
Cole o código SVG ou solte um arquivo. Otimize antes na aba Otimizar para ter o menor componente.
- 2
Escolha um framework
Escolha React (JSX ou TSX), React Native, Vue ou Svelte. Defina o nome do componente e opções como currentColor.
- 3
Copie ou baixe
Copie o componente ou baixe como arquivo .jsx, .tsx, .vue ou .svelte pronto para usar.
Por que o SVG precisa ser convertido antes de usar no React
JSX parece HTML, mas segue as regras do JavaScript. Colar um SVG puro em um componente React costuma falhar ou gerar avisos, porque atributos com hífen como stroke-width e fill-rule precisam estar em camelCase, class precisa virar className e strings de style inline precisam virar objetos. Atributos com namespace como xlink:href e metadados do Illustrator ou do Sketch também precisam ser limpos.
O viewsvg cuida de tudo isso e envolve o resultado em um componente nomeado que aceita props, para você passar className, width ou um aria-label a partir do componente pai.
Dicas para componentes de ícones SVG
- Passe o SVG antes pelo otimizador para remover metadados e reduzir os traçados.
- Ative Usar currentColor para que os ícones sigam a cor do texto e funcionem em temas claros e escuros.
- Ative Remover width/height e defina o tamanho com CSS para que o mesmo componente funcione em qualquer tamanho.
- Mantenha o
viewBox. Sem ele, o ícone não consegue escalar.
Tudo o que você precisa para trabalhar com SVG
O Conversor de SVG para JSX faz parte de um único espaço para ver, editar, otimizar e converter arquivos SVG, sem cadastro, sem anúncios e sem upload.
Prévia instantânea
Zoom de até 6400%, movimentação, ajuste à tela e fundo transparente, branco, preto ou de qualquer cor.
Editor de código ao vivo
Realce de sintaxe, marcação de erros por linha, formatar e minificar, busca e histórico completo de desfazer.
Contorno e grade de pixels
Veja cada traçado no modo contorno e confira o alinhamento dos pixels com a grade ao dar zoom.
Inspecionar
Tamanho do arquivo e com gzip, viewBox, árvore de elementos com destaque e troca de cores com um clique.
Otimizar com SVGO
Reduza arquivos com prévias de antes e depois e precisão ajustável. Otimize todos os arquivos abertos de uma vez.
PNG, JPG, WebP e ICO
Exporte em qualquer tamanho até 16384 px, com transparência, ou copie o PNG direto para a área de transferência.
React, Vue e Svelte
Componentes JSX/TSX, React Native, Vue e Svelte limpos, com suporte a currentColor e props.
Vários arquivos de uma vez
Abra muitos SVGs em abas e otimize em lote ou baixe tudo em um ZIP de SVGs ou PNGs.
Privado e offline
Sem upload, sem conta. Seu trabalho fica salvo no navegador e o app funciona offline depois da primeira visita.
Perguntas frequentes
O que muda ao converter SVG para JSX?
Os atributos passam para camelCase (stroke-width → strokeWidth), class vira className, xlink:href vira xlinkHref e strings de style inline viram objetos. O viewsvg faz tudo isso por você.
Como faço um ícone SVG herdar a cor do texto no React?
Ative “Usar currentColor”. Todo fill e stroke é trocado por currentColor, então o ícone segue a cor CSS do elemento pai.
Funciona com React Native?
Sim. Escolha React Native e você recebe um componente com react-native-svg (Svg, Path, G etc.), com a linha de import correspondente.
Meus arquivos SVG são enviados para algum lugar?
Não. O viewsvg roda inteiramente no seu navegador. Os arquivos são lidos, exibidos, otimizados e convertidos no seu dispositivo, e nada é enviado a um servidor. Depois da primeira visita, ele funciona até offline.
O viewsvg é grátis?
Sim. Todos os recursos são gratuitos, sem cadastro, sem marca d’água e sem limite de arquivos.