Transforme Seus Vetores em Componentes React Prontos para Produção
Designers adoram SVGs, mas desenvolvedores enfrentam dificuldades ao importá-los para o React. As exportações do Figma e Adobe XD trazem atributos incompatíveis com a sintaxe JSX. Nosso conversor de SVG para React JSX é uma ferramenta gratuita no navegador que limpa, formata e transforma gráficos vetoriais em componentes React tipados e reutilizáveis em segundos.
Por Que SVGs Brutos Constantemente Quebram Seu Build do React
O JSX do React baseia-se em JavaScript e segue suas convenções sintáticas. Isso gera divergências ao colar SVGs tradicionais:
Kebab-Case vs. CamelCase: SVGs usam hifens (stroke-width, fill-opacity). Como o JavaScript não permite hifens em nomes de propriedades, o React exige strokeWidth e fillOpacity.
O Conflito de "class": class é uma palavra reservada no JavaScript. O React exige o uso de className para atribuição de classes CSS.
Estilos Inline como Strings: SVGs brutos declaram estilos em texto como style="fill: blue". O React requer objetos JavaScript: style={{ fill: 'blue' }}.
Namespaces Desnecessários: Exportações gráficas trazem atributos como xmlns e xmlns:xlink que são supérfluos dentro de aplicações React modernas.
IDs Duplicados: Gradientes com IDs genéricos (id="a") geram conflitos no DOM quando o mesmo ícone é renderizado repetidas vezes na mesma página.
O Que Você Recebe: Um Componente Limpo e Moderno
Geramos componentes estruturados segundo as boas práticas do ecossistema:
import React from "react";
const SvgIcon = React.memo(
(props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="400"
height="300"
viewBox="0 0 400 300"
{...props}
>
<rect width="100%" height="100%" fill="#f8f8f8" />
<path fill="#31343C" d="M112.215 126.065v34.4h-8.38..." />
</svg>
)
);
export default SvgIcon;A propagação {...props} permite que você ajuste tamanho, cor ou propriedades adicionais a partir do componente pai sem precisar editar o SVG novamente.
Dica Profissional: Construindo um Sistema de Ícones Escalável
Para montar uma biblioteca padronizada de ícones:
- Converta os arquivos ativando as opções TypeScript e React Memo.
- Guarde cada ícone em seu próprio arquivo na pasta
components/icons. - Substitua cores fixas por
"currentColor". - Exporte todos através de um arquivo
index.tscentral.
Com fill="currentColor", a cor do ícone responde diretamente ao tema CSS do aplicativo, inclusive no modo escuro.
Para Quem Esta Ferramenta Foi Criada?
Desenvolvedores Frontend que buscam agilidade na inclusão de ícones sem ter que renomear atributos manualmente.
Engenheiros de Design Systems que precisam padronizar centenas de ativos vetoriais em pacotes de componentes com tipagem estrita.
Desenvolvedores Full-Stack que buscam uma solução confiável e imediata para seus arquivos vetoriais.
Seu Código Permanece Seu
Privacidade em primeiro lugar: todo o processamento roda localmente no seu próprio navegador. Seus códigos e ilustrações proprietárias nunca saem da sua máquina.