Conversor de SVG a JSX
Pega un SVG y obtén un componente limpio de React, React Native, Vue o Svelte, listo para copiar en tu proyecto.
- Sin subidas
- Funciona sin conexión
- Gratis, sin registro
- Tus archivos no salen del navegador
Suelta archivos SVG aquí
o pega código SVG en el editor. Puedes abrir varios archivos a la vez.
Tu SVG se queda en este dispositivo. No se sube nada.
Cómo usar el Conversor de SVG a JSX
- 1
Pega tu SVG
Pega código SVG o suelta un archivo. Optimízalo antes en la pestaña Optimizar para obtener el componente más pequeño.
- 2
Elige un framework
Elige React (JSX o TSX), React Native, Vue o Svelte. Define el nombre del componente y opciones como currentColor.
- 3
Copia o descarga
Copia el componente o descárgalo como archivo .jsx, .tsx, .vue o .svelte listo para usar.
Por qué hay que convertir un SVG antes de usarlo en React
JSX se parece a HTML pero sigue las reglas de JavaScript. Pegar un SVG tal cual en un componente de React suele fallar o mostrar avisos, porque los atributos con guion como stroke-width y fill-rule deben ir en camelCase, class debe ser className y los style en línea deben convertirse en objetos. Los atributos con espacio de nombres como xlink:href y los metadatos de Illustrator o Sketch también hay que limpiarlos.
viewsvg se encarga de todo y envuelve el resultado en un componente con nombre que acepta props, para que puedas pasar className, width o un aria-label desde el componente padre.
Consejos para componentes de iconos SVG
- Pasa antes el SVG por el optimizador para quitar metadatos y reducir los trazados.
- Activa Usar currentColor para que los iconos sigan el color del texto y funcionen en temas claros y oscuros.
- Activa Quitar width/height y dimensiona los iconos con CSS para que el mismo componente sirva a cualquier tamaño.
- Conserva el
viewBox. Sin él, el icono no puede escalarse.
Todo lo que necesitas para trabajar con SVG
El Conversor de SVG a JSX forma parte de un único espacio para ver, editar, optimizar y convertir archivos SVG, sin registro, sin anuncios y sin subidas.
Vista previa al instante
Zoom hasta el 6400 %, desplazamiento, ajuste a la pantalla y fondo transparente, blanco, negro o del color que quieras.
Editor de código en vivo
Resaltado de sintaxis, marcadores de error por línea, formatear y minificar, búsqueda e historial de deshacer completo.
Contorno y cuadrícula
Ve cada trazado en modo contorno y comprueba la alineación de píxeles con la cuadrícula al hacer zoom.
Inspeccionar
Tamaño del archivo y con gzip, viewBox, árbol de elementos con resaltado y cambio de colores con un clic.
Optimizar con SVGO
Reduce archivos comparando antes y después, con precisión ajustable. Optimiza todos los archivos abiertos a la vez.
PNG, JPG, WebP e ICO
Exporta a cualquier tamaño hasta 16384 px, con transparencia, o copia el PNG directamente al portapapeles.
React, Vue y Svelte
Componentes JSX/TSX, React Native, Vue y Svelte limpios, con soporte para currentColor y props.
Varios archivos a la vez
Abre muchos SVG como pestañas y optimízalos en lote o descárgalos en un ZIP de SVG o PNG.
Privado y sin conexión
Sin subidas ni cuentas. Tu trabajo se guarda en el navegador y la app funciona sin conexión tras la primera visita.
Preguntas frecuentes
¿Qué cambia al convertir SVG a JSX?
Los atributos pasan a camelCase (stroke-width → strokeWidth), class pasa a className, xlink:href pasa a xlinkHref y los style en texto se convierten en objetos. viewsvg hace todo esto por ti.
¿Cómo hago que un icono SVG herede el color del texto en React?
Activa «Usar currentColor». Todos los fill y stroke se sustituyen por currentColor, así que el icono sigue el color CSS de su elemento padre.
¿Es compatible con React Native?
Sí. Elige React Native y obtendrás un componente que usa react-native-svg (Svg, Path, G, etc.), con la línea de importación correspondiente.
¿Se suben mis archivos SVG a algún sitio?
No. viewsvg funciona por completo en tu navegador. Los archivos se leen, se muestran, se optimizan y se convierten en tu dispositivo, y nada se envía a un servidor. Después de la primera visita funciona incluso sin conexión.
¿viewsvg es gratis?
Sí. Todas las funciones son gratuitas, sin registro, sin marcas de agua y sin límite de archivos.