O que faz o conversor de SVG para componente?

Ele transforma um SVG bruto em um componente reutilizável de React (JSX/TSX) ou Vue 3. Além de embrulhar o SVG no componente, ele limpa o código e ajusta os atributos ao formato correto de cada framework.

Como funciona a conversão para React?

No React, os atributos são convertidos para camelCase (por exemplo, stroke-width vira strokeWidth), class vira className e o style em texto vira um objeto. O SVG é embrulhado em um componente funcional que repassa as props para o elemento svg, ideal para sistemas de ícones.

E a conversão para Vue 3?

No Vue 3, o SVG é colocado dentro de um bloco template em um Single File Component com script setup (lang ts). Os atributos permanecem no formato HTML (kebab-case) e o componente repassa automaticamente os atributos para o elemento raiz.

Para que serve a opção currentColor?

Ela substitui as cores fixas de fill e stroke por currentColor, fazendo o ícone herdar a cor do texto (a propriedade CSS color). É essencial em sistemas de ícones, pois permite recolorir o ícone só mudando a cor do elemento pai.

O componente gerado suporta TypeScript?

Sim. Escolha React (TSX) para gerar um componente tipado com SVGProps, ou Vue 3, que usa script setup (lang ts). Ambos funcionam em projetos TypeScript sem ajustes.

Meu SVG é enviado para algum servidor?

Não. Toda a conversão acontece localmente no seu navegador, em JavaScript. Nenhum SVG ou código é enviado para servidores da ToolboxHub.

Conversor de SVG para Componente React e Vue Online Grátis

Sobre o Conversor de SVG para Componente

Cole um SVG bruto e receba um componente pronto em React (JSX ou TSX) ou Vue 3. A ferramenta limpa o código, converte os atributos para o formato do framework (camelCase e className no JSX), pode trocar cores por currentColor e remover as dimensões para o ícone escalar por CSS. Ideal para montar sistemas de ícones internos. Tudo acontece localmente no seu navegador. Para reduzir o tamanho do código, use nosso Minificador.

Como converter em 3 passos

1Cole o código SVG no campo de entrada.
2Escolha o framework (React JSX/TSX ou Vue 3) e o nome do componente.
3Copie ou baixe o componente, que é gerado na hora enquanto você edita.

Conversor de SVG para Componente

Componente gerado

Sobre o Conversor de SVG para Componente

Como converter em 3 passos

Perguntas frequentes