Conversor de SVG para JSX

O que é Conversor de SVG para JSX?

O Conversor de SVG para JSX é uma ferramenta gratuita no navegador que transforma marcação SVG simples em JSX do React válido, que você pode colar diretamente em um componente. O React espera atributos do DOM em camelCase (strokeWidth, clipPath, fillRule), usa className em vez de class e precisa do atributo style como um objeto de propriedades em camelCase, e não como string — esta ferramenta corrige tudo isso automaticamente. Desenvolvedores front-end e designers a utilizam ao exportar ícones do Figma, Illustrator ou de um conjunto de ícones. Ative a limpeza opcional para remover comentários, metadados de editor e declarações XML, e escolha se a saída é JSX inline ou um componente de função, memo() ou forwardRef tipado com React.SVGProps.

Como usar Conversor de SVG para JSX

1. Cole sua marcação SVG na caixa de entrada ou solte um arquivo .svg na zona de arraste.
2. Leia o JSX convertido na caixa de saída — os atributos ficam em camelCase, class vira className, um style inline vira objeto style e as tags vazias se autofecham.
3. Abra as Configurações e escolha uma Saída de componente: JSX inline, um componente de função, um componente memo() ou um componente forwardRef.
4. Defina o campo Nome do componente para controlar o nome usado no invólucro (por exemplo, MyIcon).
5. Ative Props de TypeScript para tipar o componente com React.SVGProps, ou ative Limpar SVG para remover antes comentários e metadados do editor.
6. Clique em Copiar para copiar o JSX e depois cole-o no seu projeto React ou Next.js.

Exemplos

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

Perguntas frequentes

O que o conversor altera no meu SVG?

Ele renomeia atributos com hífen e com namespace para a forma camelCase do React (stroke-width para strokeWidth, xlink:href para xlinkHref), converte class em className, reescreve uma string style inline como objeto style do JSX com chaves em camelCase e autofecha elementos vazios como path e rect para que sejam JSX válido.

Como funcionam as opções de saída de componente?

Escolha JSX inline para colocar a marcação em qualquer lugar, ou envolva-a como componente de função, memo() ou forwardRef usando o Nome do componente que você inserir. Um componente forwardRef recebe uma ref anexada ao svg raiz. Ative Props de TypeScript para tipar qualquer invólucro com React.SVGProps e espalhar {...props}.

Ele converte estilos inline?

Sim. Um atributo style="fill:red;stroke-width:2" é reescrito como um objeto style do JSX como style={{ fill: "red", strokeWidth: "2" }}, com os nomes de propriedade em camelCase e os valores como strings. Propriedades CSS personalizadas (--var) são preservadas como chaves de string.

O que a limpeza estilo SVGO faz?

Quando Limpar SVG está ativo, a ferramenta remove declarações XML, DOCTYPE, comentários, <metadata>, namespaces de editor como inkscape: e sodipodi:, e o atributo version do svg, e depois condensa os espaços em branco — tudo antes de a conversão para JSX ser executada.

Meu SVG é enviado para algum lugar?

Não. Soltar um arquivo ou colar marcação executa uma transformação de string pura inteiramente no seu navegador, então seu SVG nunca é enviado a um servidor e a ferramenta funciona offline.