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

SVG para TSX: componentes de ícone React tipados

Gere componentes React em TypeScript a partir de SVG com os tipos de props corretos, para que cada ícone aceite className, atributos aria e manipuladores de evento com autocompletar completo.

Predefinições:
Solte arquivos .svg aqui ouOs arquivos são lidos localmente com FileReader e nunca são enviados.
Opções
Exportação:
import type { SVGProps } from "react";

const HeartIcon = (props: SVGProps<SVGSVGElement>) => (
  <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
631 B

Como funcionam os tipos gerados

As props do componente são tipadas como SVGProps<SVGSVGElement>, o mesmo tipo que o React usa para o elemento <svg>. Assim você tem autocompletar para todos os atributos SVG e manipuladores de evento, e o TypeScript rejeita props inválidas em tempo de compilação.

Com a opção size ativada, as props passam a ser SVGProps<SVGSVGElement> & { size?: number | string }, e width e height vêm de size. Com forwardRef ativado, a ref é tipada como Ref<SVGSVGElement>, permitindo que o pai anexe refs para medições ou bibliotecas de animação.

Checklist do resultado em TSX

Antes de fazer commit de um ícone gerado, verifique se:

  • O nome do componente está em PascalCase e bate com o nome do arquivo (ArrowLeft.tsx).
  • SVGProps e Ref são importados apenas como tipos e, por isso, somem do bundle JavaScript.
  • O viewBox está presente; sem ele, o ícone não consegue escalar.
  • Exportações nomeadas são usadas se o seu código proíbe exportações padrão.

Compatível com o modo strict

O código compila com "strict": true e com isolatedModules, exigidos por Next.js, Vite e esbuild. Nenhum tipo any é gerado, e o valor padrão de size é escrito como literal no padrão de desestruturação.

Perguntas frequentes

Devo usar SVGProps ou ComponentProps<"svg">?

Os dois descrevem os mesmos atributos. SVGProps<SVGSVGElement> deixa explícito o tipo do elemento e é o que as próprias definições de tipo do React usam para <svg>, por isso o conversor o utiliza.

forwardRef ainda importa no React 19?

O React 19 permite que componentes de função recebam ref como uma prop comum, então forwardRef é opcional ali. Ele continua útil para bibliotecas que precisam suportar o React 18, por isso é uma opção desativada por padrão.

Por que a prop size é do tipo number | string?

Números viram valores em pixels, enquanto strings permitem unidades CSS como "1em" ou "1.5rem", para que o ícone acompanhe o tamanho do texto ao redor.

Posso converter uma pasta inteira de ícones para TSX?

Sim. Solte todos os arquivos de uma vez; cada um vira um arquivo .tsx com o nome do SVG, reunido em um ZIP com um arquivo barrel index.ts.