SVG to JSX / React Component Converter

Cola qualquer SVG → sai um React component limpo com prop-forwarding e attrs camelCase

🔒 100% no browser🆓 Grátis pra sempre⚡ Sem sign-up
Nota: A interface da ferramenta abaixo por enquanto está só em inglês. Estamos traduzindo uma por uma. Ver essa ferramenta em inglês →

Como funciona

  1. 1
    Cola SVG markup

    Copy do dev mode do Figma, de um file de icon-library ou cola <svg>…</svg> raw.

  2. 2
    Pick nome do component e typing

    Escolha o nome do component e output JavaScript ou TypeScript.

  3. 3
    Copia o component

    Attrs ficam em camelCase, style vira object e os props são forwardados pro <svg> root.

Sobre SVG to JSX / React Component Converter

SVG to JSX converter grátis. Cola qualquer markup SVG pra sair um React functional component limpo com attributes em camelCase, prop forwarding e typing TypeScript. Ideal pra converter icon exports do Figma, Sketch ou Illustrator em React components prontos pra usar. SVG to JSX / React Component Converter no 712 Tools roda inteiro dentro do seu browser via APIs nativas de JavaScript - nenhum server vê seus dados. Isso significa resultado na hora, privacidade total e nenhum limite de upload.

Seja pra uma sessão de debug, uma checagem rápida ou um incidente em produção, essa ferramenta é grátis e sem limite de uso. Sem watermarks, sem sign-up e sem ads dentro da ferramenta.

Perguntas frequentes

O que é transformado?

Attrs kebab-case → camelCase (stroke-width → strokeWidth), class → className, style strings → objects, e o <svg> root forwarda todos os props pra size, color e event handlers.

E a otimização SVGO?

Essa tool converte pra JSX - pra encolher SVGs primeiro, usa a tool SVG Optimizer ao lado.

Meu SVG é enviado?

Não. A conversão é pura manipulação de string e roda inteira no seu browser.

Leia mais

5 min de leitura

The SVG workflow that keeps your React bundle small

How to take a Figma export from 15KB to 400 bytes, convert it into a clean React component, and ship icons without a bloated icon library.

Ferramentas relacionadas

JSON to CSV

Converte JSON arrays em CSV pra download

Timestamp Converter

Converte entre Unix time, ISO 8601 e datas legíveis

Markdown to HTML

Converte Markdown pra HTML limpo com preview ao vivo

YAML ↔ JSON

Converte YAML pra JSON e de volta com validação completa

JSON → TypeScript

Gera interfaces ou types de TypeScript a partir de um sample JSON

Base Converter

Converte entre binary, octal, decimal e hex