Converter SVG em JSX para React

Transforma marcação SVG em um componente de função React: o SVGO otimiza o SVG no seu navegador e depois o SVGR o converte no servidor. Os atributos passam para camelCase (stroke-width para strokeWidth), tamanhos numéricos viram números e {...props} é espalhado no <svg> raiz.

Transformar um ícone exportado do Figma ou do Illustrator em um componente React.

SVG

SVGO optimization is turned on. You can turn it off or configure it in settings. Conversion runs locally in your browser. Your code is not uploaded.

Original

Result

JSX

Quando usar

Transformar um ícone exportado do Figma ou do Illustrator em um componente React.
Verificar como o SVGR vai reescrever um SVG antes de adicionar o SVGR a um pipeline de build.

Como usar

Cole marcação SVG ou carregue um arquivo .svg; entrada que não seja SVG válido é rejeitada com um erro.
Abra Configurações para desativar a otimização do SVGO ou ligar e desligar plugins como remove title ou merge paths; a pré-visualização abaixo do editor compara o SVG original e o otimizado.
Copie o componente e renomeie SvgComponent; passe className, width ou fill como props.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

Componente React (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

Detalhes e limitações

O SVGO roda em um Web Worker no seu navegador; em seguida, o SVG otimizado é enviado ao endpoint /api/svg-to-jsx deste site, onde o SVGR gera o componente. Não cole artes confidenciais.

Com as configurações padrão, comentários, <title>, <desc> e metadados do editor são removidos e os dados de path são encurtados (M5.000 12.000 L19.000 12.000 vira M5 12h14). Desative a otimização para converter o SVG exatamente como colado.

Strings style viram objetos style e class vira className.

A saída é voltada para React DOM; use SVG para React Native para react-native-svg.

FAQ

Por que a raiz mantém width e height?

remove dimensions está desativado nas configurações do SVGO e o SVGR usa as opções padrão, então as dimensões são mantidas como números (width={24}). Sobrescreva-as via props, já que {...props} vem depois delas.

fill="currentColor" me permite definir a cor pelo CSS?

Sim. currentColor é mantido, então o ícone segue a cor CSS do elemento pai. Cores fixas dentro dos paths não são substituídas.

Por que o <title> sumiu do meu componente?

O remove title do SVGO vem ativado por padrão. Desative-o em Configurações, ou desligue a otimização por completo, se precisar do <title> para acessibilidade.

Há saída em TypeScript?

Não. A página gera um componente JavaScript sem anotações de tipo.

Especificações e referências

SVGR documentation

SVG