Saltar al contenido
Numio

Convertir SVG a React Native — Numio

Convierte marcado SVG en un componente de React Native que importa Svg, Path, G y otros elementos de react-native-svg. Primero se ejecuta la optimización de SVGO, y los atributos pasan a props JSX con los valores numéricos como números (strokeWidth={2}).

Convertir un icono exportado desde Figma o Sketch en un componente para una app de Expo o React Native que usa react-native-svg.

SVG

React Native

Cuándo usarla

  • Convertir un icono exportado desde Figma o Sketch en un componente para una app de Expo o React Native que usa react-native-svg.
  • Reducir un SVG inflado (títulos, metadatos del editor, defs sin usar) antes de publicarlo como componente nativo.

Cómo usarla

  1. Pega marcado SVG en el editor SVG o suelta un archivo .svg; la entrada debe ser SVG válido o aparecerá "This is not a valid svg code."
  2. Abre SVGO Settings para desactivar la optimización o activar y desactivar plugins concretos como remove title, remove view box o merge paths; la vista previa bajo el editor compara el SVG original y el optimizado.
  3. Copia la salida del panel React Native en un archivo .js o .tsx e instala react-native-svg en tu app.

Marcado 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

Detalles y limitaciones

La optimización con SVGO se ejecuta en un Web Worker en tu navegador, pero la generación de JSX se hace en el servidor: el SVG optimizado se envía a /api/svg-to-jsx, que ejecuta SVGR con native: true.

Los elementos que react-native-svg no admite se eliminan, y SVGR añade un comentario como /* SVGR has dropped some elements not supported by react-native-svg: filter */.

SVGO incorpora las reglas de <style> en línea y luego convierte las declaraciones de estilo en atributos, así que style="stroke:blue" pasa a stroke="#00f" (prop stroke). <title> se elimina por defecto.

width, height y viewBox se conservan, y {...props} se propaga en el Svg raíz para que puedas sobrescribir el tamaño o el color.

FAQ

¿La salida necesita react-native-svg?

Sí. El componente importa Svg y componentes de elemento como Path, Circle y G de react-native-svg, que debe estar instalado en tu proyecto; no funciona con Views de React Native normales.

¿Puedo conservar el viewBox para que el icono escale?

Sí. remove view box está desactivado por defecto, así que viewBox se mantiene en el elemento Svg. Pasa las props width y height al usar el componente para escalarlo.

¿Qué pasa con los filtros y los degradados?

Los elementos sin equivalente en react-native-svg, como filter, se descartan con un comentario al principio del archivo. Los degradados sin usar los elimina remove useless defs de SVGO.

¿Se sube mi SVG?

El SVG optimizado se envía al endpoint /api/svg-to-jsx de la página para generar el componente; el paso de optimización y la vista previa se quedan en tu navegador.

Especificaciones y referencias