Pular para o conteúdo
Numio

Converter SVG em componentes React Native — Numio

Transforma markup SVG em um componente React Native que importa Svg, Path, G e outros elementos de react-native-svg. A otimização do SVGO roda primeiro, e os atributos viram props JSX com valores numéricos como números (strokeWidth={2}).

Converter um ícone exportado do Figma ou do Sketch em um componente para um app Expo ou React Native que usa react-native-svg.

SVG

React Native

Quando usar

  • Converter um ícone exportado do Figma ou do Sketch em um componente para um app Expo ou React Native que usa react-native-svg.
  • Enxugar um SVG inchado (títulos, metadados do editor, defs não usados) antes de publicá-lo como componente nativo.

Como usar

  1. Cole markup SVG no editor SVG ou solte um arquivo .svg; a entrada precisa ser SVG válido, senão aparece "This is not a valid svg code."
  2. Abra SVGO Settings para desativar a otimização ou ligar e desligar plugins individuais como remove title, remove view box ou merge paths; a pré-visualização abaixo do editor compara o SVG original e o otimizado.
  3. Copie a saída do painel React Native para um arquivo .js ou .tsx e instale react-native-svg no seu app.

Markup SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Check</title>
  <g fill="none" stroke="#16a34a" stroke-width="2">
    <circle cx="12" cy="12" r="10"/>
    <path d="M7 12.5l3 3 7-7"/>
  </g>
</svg>

Componente React Native (react-native-svg)

import * as React from "react"
import Svg, { G, Circle, Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <G fill="none" stroke="#16a34a" strokeWidth={2}>
      <Circle cx={12} cy={12} r={10} />
      <Path d="m7 12.5 3 3 7-7" />
    </G>
  </Svg>
)
export default SvgComponent

Detalhes e limitações

A otimização do SVGO roda em um Web Worker no seu navegador, mas a geração do JSX é feita no servidor: o SVG otimizado é enviado para /api/svg-to-jsx, que executa o SVGR com native: true.

Elementos que o react-native-svg não suporta são removidos, e o SVGR adiciona um comentário como /* SVGR has dropped some elements not supported by react-native-svg: filter */.

O SVGO incorpora as regras de <style> inline e depois transforma declarações de estilo em atributos, então style="stroke:blue" vira stroke="#00f" (prop stroke). <title> é removido por padrão.

width, height e viewBox são mantidos, e {...props} é espalhado no Svg raiz para você poder sobrescrever tamanho ou cor.

FAQ

A saída precisa de react-native-svg?

Sim. O componente importa Svg e componentes de elemento como Path, Circle e G de react-native-svg, que precisa estar instalado no seu projeto; ele não funciona com Views comuns do React Native.

Posso manter o viewBox para o ícone escalar?

Sim. remove view box vem desativado por padrão, então o viewBox permanece no elemento Svg. Passe as props width e height ao usar o componente para escalá-lo.

O que acontece com filtros e gradientes?

Elementos sem equivalente no react-native-svg, como filter, são descartados com um comentário no topo do arquivo. Gradientes não usados são removidos pelo remove useless defs do SVGO.

Meu SVG é enviado?

O SVG otimizado é enviado ao endpoint /api/svg-to-jsx da página para gerar o componente; a etapa de otimização e a pré-visualização ficam no seu navegador.

Especificações e referências