Cómo usar: Conversor SVG a JSX
- Pega el código de tu SVG, abre un archivo
.svgo haz clic en Ejemplo. - Define el nombre del componente y las opciones: TypeScript, props spread, eliminar tamaños fijos o cambiar los colores a
currentColor. - Revisa la vista previa saneada para confirmar que el icono se ve bien.
- Copia el componente o descárgalo como archivo
.jsx/.tsxe impórtalo en tu proyecto React o Next.js.
Por qué SVG necesita conversión para React
SVG es XML, y JSX es JavaScript que solo se parece a HTML. Pegar SVG sin procesar en un componente React suele generar advertencias como “Invalid DOM property stroke-width. Did you mean strokeWidth?” o un error de compilación con atributos con espacio de nombres como xlink:href e inkscape:label. Este conversor reescribe el código como JSX válido y lo envuelve en un componente.
Qué se convierte
| SVG | JSX |
|---|---|
class="icon" | className="icon" |
stroke-width="2", fill-rule, stop-color | strokeWidth="2", fillRule, stopColor |
xlink:href="#a", xml:space | xlinkHref="#a", xmlSpace |
style="fill-opacity: .5; stroke-linecap: round" | style={{ fillOpacity: 0.5, strokeLinecap: 'round' }} |
data-* y aria-* | Se mantienen tal cual (React los espera con guiones) |
<?xml?>, <!DOCTYPE>, comentarios, <metadata>, atributos de editores (Inkscape, Sodipodi, Sketch) | Eliminados |
onclick y otros manejadores en línea, <script> | Eliminados: los manejadores como cadenas no son válidos en React |
Hacer los iconos más flexibles
Con Spread props activado, el componente termina con {...props} en el <svg>, así que puedes pasar className, width, aria-label o manejadores de eventos: <HeartIcon className="h-6 w-6" />. Quitar width/height deja que el CSS dimensione el icono (se añade un viewBox a partir del tamaño anterior si falta). Colores → currentColor reemplaza rellenos y trazos para que el icono herede el color del texto, ideal para sets de iconos monocromos. La opción TypeScript tipa las props como SVGProps<SVGSVGElement>.
Accesibilidad
Para iconos decorativos junto a un texto, añade aria-hidden="true". Para iconos independientes con significado, mantén un <title> o pasa role="img" con un aria-label.
Privacidad y seguridad
La conversión se ejecuta por completo en tu navegador: el SVG nunca sale de tu dispositivo. La vista previa está saneada: scripts, foreignObject, manejadores de eventos en línea y referencias externas se eliminan antes de renderizar. ¿Trabajas con un flujo basado en bundles? Herramientas como SVGR hacen lo mismo en tiempo de compilación; esta página es para iconos rápidos y puntuales. Si quieres usar un SVG como fondo CSS, prueba SVG a CSS.
También se busca como: svg a jsx, svg a react, svg a tsx, componente react svg, svgr online, convertidor jsx, convertidor svg a react, icono svg react.
Herramientas que combinan con: Conversor SVG a JSX
- HTML a Markdown — Pega HTML — o copia texto enriquecido directamente de una página web, un Google Doc o un correo — y obtén un Markdown ordenado que puedes llevar a un README, una wiki o un sitio estático.
- JSON a TypeScript — Pega una muestra de JSON (una respuesta de API, una configuración) y obtén interfaces de TypeScript listas para usar, con tipos anidados, propiedades opcionales y tipos unión.
- Imagen a Base64 — Convierte un archivo PNG, JPEG, SVG, WebP o GIF en un URI de datos Base64 con código CSS y HTML listo para copiar, o pega una cadena Base64 para ver una vista previa y descargar la imagen.
- Formateador HTML — Pega HTML minificado o desordenado y obtén HTML limpio y con sangría coherente, incluidos los bloques <style> y <script> incrustados.
Preguntas frecuentes
¿Por qué React muestra la advertencia “Invalid DOM property class”?
class es una palabra reservada en JavaScript, así que React usa className. Lo mismo ocurre con los atributos SVG con guiones, que deben escribirse en camelCase (stroke-width → strokeWidth). Esta herramienta los convierte automáticamente.¿Debo usar xlinkHref o href?
href simple de SVG 2, y xlink:href está obsoleto. React sigue aceptando xlinkHref, así que el código convertido seguirá funcionando; puedes cambiar a href si no necesitas soportar navegadores muy antiguos.¿Cómo cambio el color del icono con CSS?
color CSS de su elemento padre, así que className="text-red-500" o style={{ color: "red" }} lo recolorearán.¿La salida funciona en Next.js y Vite?
¿Funciona para React Native?
react-native-svg, que usa componentes con mayúscula inicial como <Svg> y <Path>. Los atributos en camelCase de esta herramienta son un buen punto de partida, pero tendrás que renombrar los elementos.