Saltar al contenido
SvgJsx
Idioma: Español

Convertir SVG a React Native (react-native-svg)

React Native no puede renderizar etiquetas <svg> directamente. Este convertidor reescribe tu SVG con componentes de react-native-svg como Svg, Path, G y Circle, con los imports correctos.

Ajustes rápidos:
Suelta archivos .svg aquí oLos archivos se leen localmente con FileReader y nunca se suben.
Opciones
Exportación:
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;

Notas

  • Se han eliminado los atributos class porque React Native no los admite.

Vista previa

Vista previa del SVG convertido
SVG original
706B
SVG optimizado
538B(-24 %)
Componente
648B

En qué se diferencia el resultado para React Native

react-native-svg ofrece un componente con mayúscula inicial para cada elemento SVG: <path> pasa a ser <Path>, <g> pasa a ser <G> y <linearGradient> pasa a ser <LinearGradient>. El convertidor mapea todos los elementos compatibles, añade una única línea de import con los componentes que realmente usas y tipa las props como SvgProps.

Los elementos sin equivalente nativo, como <title>, <desc>, <style> o <metadata>, se descartan con un aviso para que el componente no falle en tiempo de ejecución. También se eliminan los atributos class, ya que React Native no tiene clases CSS.

Configurar react-native-svg

Para usar el componente generado:

  • Instala la librería: npx expo install react-native-svg (Expo) o npm install react-native-svg (React Native sin Expo).
  • Guarda el código convertido como archivo .tsx o .jsx en tu proyecto.
  • Renderízalo como cualquier componente y pásale las props width, height o color.
  • Activa currentColor y pasa una prop color para teñir el icono desde el padre.

Consejos para iconos móviles

Mantén los iconos sencillos: los filtros y las máscaras son costosos de renderizar en dispositivos Android de gama baja. Redondea las coordenadas a uno o dos decimales para reducir el bundle de JavaScript y, en iconos muy pequeños, prefiere rellenos a trazos, porque los trazos finos pueden verse borrosos en pantallas sin alta densidad.

Preguntas frecuentes

¿Funciona con Expo?

Sí. react-native-svg forma parte del SDK de Expo; instálalo con npx expo install react-native-svg y el componente generado funcionará en Expo Go y en las development builds.

¿Por qué se ha eliminado mi elemento <style>?

react-native-svg no admite hojas de estilo CSS. Antes de convertir, pasa esas reglas a atributos como fill y stroke o aplícalas directamente en los elementos.

¿Cómo cambio el color del icono en React Native?

Activa currentColor y pasa color="#ff0000" al componente. react-native-svg resuelve currentColor a partir de la prop color del elemento Svg.

¿Sigue haciendo falta react-native-svg-transformer?

No si conviertes los iconos de antemano. El transformer permite importar archivos .svg directamente, mientras que esta herramienta genera componentes normales que no necesitan configurar Metro.