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

Converter SVG em um componente React

Transforme qualquer ícone ou ilustração SVG em um componente funcional do React, com atributos prontos para JSX, repasse de props e props opcionais de tamanho e cor.

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

Por que não colar o SVG direto no React?

Colar SVG bruto em um arquivo .jsx costuma gerar uma enxurrada de avisos como "Invalid DOM property stroke-width" ou "Invalid DOM property class", ou até um erro de compilação se o arquivo tiver um atributo style ou uma declaração XML. Renomear cada atributo à mão é lento e propenso a erros em conjuntos grandes de ícones.

Este conversor faz a renomeação por você e envolve a marcação em um componente que aceita props. Como {...props} é repassado ao <svg> raiz, você pode passar className, aria-label, onClick ou uma largura personalizada a partir do componente pai, sem editar o ícone de novo.

Configurações recomendadas para ícones React

Para um componente de ícone reutilizável, recomendamos:

  • Ativar currentColor para que o ícone herde a cor do texto do pai e funcione no modo escuro.
  • Ativar a prop size para controlar largura e altura com um único valor, como size={20}.
  • Manter o viewBox e remover width e height fixos para que o ícone escale com CSS.
  • Usar forwardRef só quando o pai precisar do elemento <svg>, por exemplo para tooltips ou animações.

Componentes inline ou arquivos de imagem?

Componentes SVG inline podem ser estilizados com CSS, animados e mudar de cor no hover, e nunca geram uma requisição de rede extra. Para ilustrações grandes que não mudam, um simples <img src="/file.svg"> pode sair mais barato, porque o navegador consegue armazená-lo em cache separadamente. Use componentes para ícones e gráficos de interface e tags de imagem para artes pesadas.

Perguntas frequentes

Quais versões do React são suportadas?

O resultado é um componente de função comum que funciona com React 16.8 ou superior, incluindo React 18 e 19. forwardRef e memo são opcionais e só são importados quando você os ativa.

Preciso importar o React no arquivo gerado?

Não. Com a transformação moderna de JSX usada por Next.js, Vite e Create React App 4+, o React não precisa estar no escopo. O conversor importa apenas o que o componente realmente usa.

Como mudo a cor do ícone a partir do pai?

Ative a opção currentColor. Preenchimentos e contornos são trocados por currentColor, e o ícone passa a usar a cor CSS do pai, por exemplo a classe text-red-600 do Tailwind.

Posso passar onClick ou aria-label para o ícone?

Sim. O componente repassa {...props} ao <svg> raiz, então qualquer atributo SVG ou manipulador de evento que você passar é encaminhado e sobrescreve os valores padrão.