SVG Forge

SVG para componente React

Cole um SVG e receba um componente JSX ou TSX pronto para importar.

ou solte um arquivo / cole o código abaixo
Componente React
A saída aparece aqui

Como funciona

  1. 1Cole código SVG ou solte um arquivo .svg.
  2. 2Ative a saída em TypeScript e defina o nome do componente.
  3. 3Copie o componente gerado para o seu código.

Grátis, sem cadastro e sem marca d'água — tudo roda localmente no seu navegador, então seus arquivos nunca saem da sua máquina.

Perguntas frequentes

O que exatamente é convertido?

Os atributos viram camelCase (stroke-width → strokeWidth), class vira className e as demais props são repassadas à raiz, então você pode passar tamanho e cor.

Devo otimizar o SVG antes?

Sim — passe primeiro pelo otimizador de SVG para um componente menor e mais limpo. As duas ferramentas ficam a um clique.

Ferramentas relacionadas

SVG para Vue

Transforme qualquer SVG em um componente de arquivo único do Vue 3.

Otimizador de SVG

Limpeza movida a SVGO: arquivos menores, os mesmos pixels. A economia aparece na hora.

SVG para data URI

Codifique SVG para img src, url() do CSS ou qualquer lugar em que caiba um URI.