Pular para o conteúdo
SvgJsx
Idioma: Português

Conversor de SVG para JSX e componentes React

Cole um código SVG ou solte arquivos .svg e receba um componente limpo, pronto para commit, para React, TypeScript, React Native, Vue ou Solid. Tudo roda localmente no seu navegador.

Predefinições:
Solte arquivos .svg aqui ouOs arquivos são lidos localmente com FileReader e nunca são enviados.
Opções
Exportação:
const HeartIcon = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

Pré-visualização

Pré-visualização do SVG convertido
SVG original
706 B
SVG otimizado
538 B(-24%)
Componente
566 B

O que este conversor de SVG faz

Arquivos SVG exportados do Figma, Illustrator, Sketch ou Inkscape são XML válido, mas não são JSX válido. O React espera props em camelCase, como strokeWidth em vez de stroke-width, className em vez de class e um objeto de estilo em vez de uma string CSS. Os editores ainda adicionam declarações XML, comentários, blocos de metadados e atributos com namespace que incham o bundle e geram avisos.

O SvgJsx analisa o SVG com um pequeno parser XML, reescreve cada atributo no formato que o seu framework espera e gera um componente bem formatado. Você pode escolher tipos TypeScript, uma prop size, preenchimentos com currentColor, forwardRef, memo e o estilo de exportação, e depois copiar o código ou baixar o arquivo.

Como converter SVG em um componente React

O processo leva poucos segundos:

  • Cole o código SVG na caixa de entrada ou solte nela um ou mais arquivos .svg.
  • Escolha o formato de saída: React, React Native, Vue, Solid ou um trecho JSX simples.
  • Defina o nome do componente e opções como TypeScript, currentColor e a prop size.
  • Confira a pré-visualização ao vivo e a comparação de tamanho, depois copie o código ou baixe o arquivo. Vários arquivos são reunidos em um ZIP.

Conversões feitas automaticamente

Atributos com hífen viram camelCase (stroke-linecap → strokeLinecap), atributos com namespace são achatados (xlink:href → xlinkHref) e strings de estilo inline viram objetos JavaScript. Atributos data-* e aria-* são mantidos como estão, porque o React os aceita assim. Elementos script e manipuladores de evento inline são removidos, para que um arquivo colado nunca consiga infiltrar código no seu app.

Uma otimização leve compacta os espaços em branco e pode arredondar coordenadas para um número fixo de casas decimais. Na maioria dos conjuntos de ícones, isso corta de 20 a 40% da marcação sem depender do pesado SVGO.

Perguntas frequentes

Este conversor de SVG para JSX é gratuito?

Sim. O SvgJsx é totalmente gratuito, não exige conta e não tem limites de uso. É um site estático, então não há custo de servidor para repassar a você.

Meus arquivos SVG são enviados para algum lugar?

Não. Os arquivos são lidos com a API FileReader do navegador e convertidos com JavaScript no seu dispositivo. Nada é enviado a um servidor, o que torna a ferramenta segura para logos e ícones confidenciais.

Qual é a diferença entre SVG e JSX?

SVG é uma marcação XML, enquanto JSX é uma extensão de sintaxe do JavaScript. O JSX exige nomes de atributos em camelCase, className em vez de class, objetos de estilo em vez de strings e chaves para caracteres especiais; por isso o SVG bruto costuma falhar na compilação.

Funciona com arquivos exportados do Figma e do Illustrator?

Sim. Metadados específicos do editor, comentários, atributos sodipodi e inkscape e a declaração XML são removidos por padrão, e gradientes, máscaras e clip paths continuam funcionando porque os ids referenciados são preservados.

Posso converter vários ícones SVG de uma vez?

Sim. Solte vários arquivos .svg e cada um vira um componente com o nome do arquivo. Baixe todos em um ZIP que também traz um arquivo index que reexporta cada ícone.