Pular para o conteúdo
SvgJsx
Idioma: Português

Converter SVG para React Native (react-native-svg)

O React Native não renderiza tags <svg> diretamente. Este conversor reescreve seu SVG com componentes do react-native-svg como Svg, Path, G e Circle, com os imports certos.

Predefinições:
Solte arquivos .svg aqui ouOs arquivos são lidos localmente com FileReader e nunca são enviados.
Opções
Exportação:
import Svg, { G, Path } from "react-native-svg";
import type { SvgProps } from "react-native-svg";

const HeartIcon = (props: SvgProps) => (
  <Svg width="24" height="24" viewBox="0 0 24 24" {...props}>
    <G id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <Path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </G>
  </Svg>
);

export default HeartIcon;

Observações

  • Os atributos class foram removidos porque o React Native não os suporta.

Pré-visualização

Pré-visualização do SVG convertido
SVG original
706 B
SVG otimizado
538 B(-24%)
Componente
648 B

O que muda no resultado para React Native

O react-native-svg oferece um componente com inicial maiúscula para cada elemento SVG: <path> vira <Path>, <g> vira <G> e <linearGradient> vira <LinearGradient>. O conversor mapeia todos os elementos suportados, gera uma única linha de import só com os componentes usados e tipa as props como SvgProps.

Elementos sem equivalente nativo, como <title>, <desc>, <style> ou <metadata>, são descartados com um aviso para que o componente não quebre em tempo de execução. Atributos class também são removidos, já que o React Native não tem classes CSS.

Configurando o react-native-svg

Para usar o componente gerado:

  • Instale a biblioteca: npx expo install react-native-svg (Expo) ou npm install react-native-svg (React Native puro).
  • Salve o código convertido como arquivo .tsx ou .jsx no seu projeto.
  • Renderize como qualquer componente e passe width, height ou color.
  • Ative currentColor e passe uma prop color para colorir o ícone a partir do pai.

Dicas para ícones mobile

Mantenha os ícones simples: filtros e máscaras custam caro para renderizar em aparelhos Android de entrada. Arredonde coordenadas para uma ou duas casas decimais para reduzir o bundle JavaScript e, em ícones muito pequenos, prefira preenchimento a contorno, porque traços finos podem ficar borrados em telas sem alta densidade.

Perguntas frequentes

Funciona com Expo?

Sim. O react-native-svg faz parte do SDK do Expo; instale com npx expo install react-native-svg e o componente gerado funciona no Expo Go e em development builds.

Por que meu elemento <style> foi removido?

O react-native-svg não suporta folhas de estilo CSS. Antes de converter, transforme essas regras em atributos como fill e stroke ou aplique-as diretamente nos elementos.

Como mudo a cor do ícone no React Native?

Ative currentColor e passe color="#ff0000" ao componente. O react-native-svg resolve currentColor a partir da prop color do elemento Svg.

O react-native-svg-transformer ainda é necessário?

Não, se você converter os ícones antes. O transformer permite importar arquivos .svg diretamente, enquanto esta ferramenta gera componentes comuns que não exigem configuração do Metro.