Como usar: Conversor de SVG para JSX
- Cole o código SVG, abra um arquivo
.svgou clique em Exemplo. - Defina o nome do componente e as opções: TypeScript, spread de props, remoção de tamanhos fixos ou troca de cores por
currentColor. - Confira a prévia sanitizada para garantir que o ícone está correto.
- Copie o componente ou baixe-o como arquivo
.jsx/.tsxe importe no seu projeto React ou Next.js.
Por que o SVG precisa ser convertido para React
SVG é XML, e JSX é JavaScript que só se parece com HTML. Colar SVG puro dentro de um componente React normalmente gera avisos como “Invalid DOM property stroke-width. Did you mean strokeWidth?” ou um erro de build em atributos com namespace, como xlink:href e inkscape:label. Este conversor reescreve o código em JSX válido e o envolve em um componente.
O que é convertido
| SVG | JSX |
|---|---|
class="icon" | className="icon" |
stroke-width="2", fill-rule, stop-color | strokeWidth="2", fillRule, stopColor |
xlink:href="#a", xml:space | xlinkHref="#a", xmlSpace |
style="fill-opacity: .5; stroke-linecap: round" | style={{ fillOpacity: 0.5, strokeLinecap: 'round' }} |
data-* e aria-* | Mantidos como estão (o React espera hífens aqui) |
<?xml?>, <!DOCTYPE>, comentários, <metadata>, atributos de editores (Inkscape, Sodipodi, Sketch) | Removidos |
onclick e outros manipuladores inline, <script> | Removidos — manipuladores em string não são válidos no React |
Deixando os ícones flexíveis
Com Spread props ativado, o componente termina com {...props} no <svg>, então você pode passar className, width, aria-label ou manipuladores de eventos: <HeartIcon className="h-6 w-6" />. Remover width/height deixa o CSS definir o tamanho do ícone (um viewBox é adicionado com base no tamanho antigo, caso não exista). Cores → currentColor substitui preenchimentos e contornos para que o ícone herde a cor do texto, ideal para conjuntos de ícones monocromáticos. A opção TypeScript tipa as props como SVGProps<SVGSVGElement>.
Acessibilidade
Para ícones decorativos ao lado de texto, adicione aria-hidden="true". Para ícones com significado próprio, mantenha um <title> ou use role="img" com um aria-label.
Privacidade e segurança
A conversão roda inteiramente no seu navegador: o SVG nunca sai do seu dispositivo. A prévia é sanitizada: scripts, foreignObject, manipuladores de eventos inline e referências externas são removidos antes da renderização. Tem um fluxo com build? Ferramentas como o SVGR fazem o mesmo no momento do build; esta página serve para ícones avulsos e rápidos. Para usar um SVG como plano de fundo em CSS, experimente o SVG para CSS.
Também pesquisado como: svg para jsx, svg para react, svg para tsx, componente react svg, svgr online, conversor jsx, ícone svg react, classname.
Ferramentas que combinam com: Conversor de SVG para JSX
- HTML para Markdown — Cole o HTML — ou copie texto formatado direto de uma página web, Google Doc ou e-mail — e receba um Markdown organizado para usar em um README, wiki ou site estático.
- JSON para TypeScript — Cole um exemplo de JSON, como a resposta de uma API ou um arquivo de configuração, e receba interfaces TypeScript prontas para uso, com tipos aninhados, propriedades opcionais e union types.
- Imagem para Base64 — Transforme um arquivo PNG, JPEG, SVG, WebP ou GIF em um URI de dados Base64 com CSS e HTML prontos para copiar — ou cole uma sequência Base64 para visualizar e baixar a imagem.
- Formatador HTML — Cole HTML minificado ou bagunçado e receba um código limpo e com indentação consistente, incluindo os blocos <style> e <script> embutidos.
Perguntas frequentes
Por que o React mostra o aviso “Invalid DOM property class”?
class é uma palavra reservada em JavaScript, então o React usa className. O mesmo vale para atributos SVG com hífen, que precisam estar em camelCase (stroke-width → strokeWidth). Esta ferramenta faz essa conversão automaticamente.Devo usar xlinkHref ou href?
href simples do SVG 2, e o xlink:href está obsoleto. O React ainda aceita xlinkHref, então o código convertido continua funcionando; você pode trocar para href se não precisar dar suporte a navegadores muito antigos.Como mudo a cor do ícone com CSS?
color do CSS do elemento pai, então className="text-red-500" ou style={{ color: "red" }} alteram a cor dele.A saída funciona no Next.js e no Vite?
Funciona no React Native?
react-native-svg, que usa componentes com inicial maiúscula, como <Svg> e <Path>. Os atributos em camelCase desta ferramenta são um bom ponto de partida, mas você precisa renomear os elementos.