Cualquier desarrollador que haya pegado un SVG sin procesar en un proyecto React conoce estos puntos de dolor.
Los SVG sin procesar usan atributos con guiones como clip-rule, fill-opacity y stroke-linecap. React exige camelCase: clipRule, fillOpacity, strokeLinecap. Olvidar uno solo desencadena errores en tiempo de ejecución o bugs de estilo difíciles de rastrear.
Figma y Sketch exportan SVG con colores incrustados como fill="#3B82F6". Cada ícono se vuelve un componente de un solo uso. Reutilizarlo en temas oscuros, estados hover o diferentes colores de marca requiere clonar y editar manualmente.
Las herramientas de diseño añaden <title>, <defs>, grupos <g> vacíos y atributos redundantes a cada SVG exportado. Este código inútil infla el bundle JSX y ralentiza el tiempo de parseo — especialmente visible cuando se tienen decenas de íconos inline.
Pega SVG a la izquierda, obtén el componente React a la derecha
Seis conversiones de nivel producción, al instante, todas en el navegador.
Pega cualquier SVG y el componente React aparece al instante. La conversión SVG a React se ejecuta como una transformación AST en el navegador — sin viajes de red, sin latencia, sin límite de tamaño de archivo.
Activa el modo TSX y el conversor añade automáticamente interface IconProps extends React.SVGProps<SVGSVGElement> en la parte superior del archivo. Cada prop está completamente tipado: className, atributos personalizados, sin conversiones forzadas.
Antes de la conversión SVG a React, la herramienta elimina los <title>, <defs>, grupos vacíos y atributos redundantes que Figma o Sketch exportan, y fusiona y simplifica rutas — reduciendo el tamaño del output SVG a React hasta un 60%.
Con el modo Tailwind activado, el conversor SVG a React reemplaza los colores fill y stroke hardcodeados por className="fill-current" y currentColor. Los íconos heredan al instante el color del texto del elemento padre, funcionando perfectamente en cualquier tema.
Todos los atributos SVG con guiones — clip-rule, fill-opacity, stroke-linecap, xlink:href — se renombran automáticamente a sus equivalentes camelCase de React, y class se convierte en className. El output SVG a React siempre es JSX válido.
Elimina de un clic el width y height hardcodeados del elemento SVG raíz. El componente SVG a React se dimensionará mediante CSS o la prop className, siendo completamente responsive y fácil de controlar desde el layout padre.
Desde la exportación SVG sin procesar hasta un componente React listo para pegar en menos de 30 segundos.
Copia el SVG fuente desde Figma, Sketch, una biblioteca de íconos o un archivo SVG y pégalo en el panel izquierdo de la herramienta SVG a React. Acepta cualquier SVG válido, incluidos íconos con múltiples rutas e ilustraciones complejas.
Selecciona el formato de salida y las optimizaciones según los requisitos de tu proyecto. Activa TypeScript para salida TSX con props tipados; activa SVGO para limpiar el ruido de Figma antes de la conversión SVG a React; activa Tailwind CSS para reemplazar colores hardcodeados por currentColor.
El panel derecho muestra el output SVG a React en tiempo real mientras escribes. Haz clic en Copiar para enviar el componente React al portapapeles, luego pégalo directamente en tu archivo .jsx o .tsx — sin ajustes de formato necesarios.
Ya sea que estés construyendo un sistema de diseño, optimizando el tamaño del bundle o entregando íconos pulidos, el conversor SVG a React se adapta a tu flujo de trabajo.
Pega SVG sin procesar a la izquierda y el componente React aparece a la derecha en tiempo real. La transformación SVG a React se ejecuta como un recorrido AST puro en el navegador — sin esperas, sin servidor, sin límites de velocidad.
Cambia el output SVG a React de JSX a TSX con un clic y se genera automáticamente interface IconProps extends React.SVGProps<SVGSVGElement>. Cada clase CSS, etiqueta aria y manejador de eventos está completamente tipado, listo para proyectos Next.js o Vite en modo estricto.
El conversor ejecuta compresión SVGO antes de la transformación SVG a React — eliminando metadatos de Figma, fusionando rutas redundantes, reduciendo el tamaño del archivo hasta un 60%. El modo Tailwind reemplaza los colores fill hardcodeados con currentColor para que cada ícono se adapte a cualquier tema sin sobreescrituras CSS.
Preguntas comunes sobre la conversión de SVG a componentes React, props TypeScript y optimización SVG.
SVG a React significa transformar archivos SVG sin procesar — exportados desde Figma, Sketch o una biblioteca de íconos — en componentes de función React reutilizables. El marcado SVG se convierte en JSX, los atributos con guiones pasan a camelCase, y el componente acepta props como className, width y aria-label.
Inline SVG como un componente React permite controlar fill y stroke mediante CSS, animar rutas individuales con Framer Motion, añadir etiquetas ARIA para accesibilidad y hacer tree-shake de íconos no utilizados en tiempo de compilación. La etiqueta <img> trata el SVG como una imagen opaca, sin ofrecer ninguna de estas capacidades.
Sí. Activa el interruptor TypeScript y el output SVG a React cambia del formato .jsx al .tsx. El conversor genera automáticamente interface IconProps extends React.SVGProps<SVGSVGElement> en la parte superior del archivo, dando cobertura de tipos completa a cada prop.
La herramienta SVG a React maneja todos los atributos con guiones conocidos: clip-rule → clipRule, fill-opacity → fillOpacity, stroke-linecap → strokeLinecap, stroke-linejoin → strokeLinejoin, stroke-width → strokeWidth, xlink:href → href, class → className. El output siempre es JSX válido.
Antes de la transformación SVG a React, la herramienta ejecuta un recorrido SVGO en JavaScript en el navegador, eliminando los <title>, <desc>, <defs>, elementos <g> vacíos y atributos de presentación redundantes que añaden las herramientas de diseño, fusionando y simplificando rutas para producir un componente React más ligero.
Con el modo Tailwind activado, el conversor SVG a React reemplaza los atributos fill="#hex" y stroke="#hex" hardcodeados con fill="currentColor" y stroke="currentColor", y añade className="fill-current" al elemento <svg> raíz. Los íconos heredan instantáneamente las clases text-color del padre, lo que facilita el modo oscuro y el cambio de temas.
No. Toda la conversión SVG a React se procesa dentro del motor JavaScript del navegador. El SVG fuente nunca sale de tu dispositivo. Sin backend, sin cargas, sin registros, sin límites de velocidad.
Sí, aunque los SVG muy grandes (cientos de rutas) pueden tardar un poco más en procesarse. La herramienta SVG a React soporta íconos con múltiples rutas, rutas de recorte, gradientes, máscaras y grupos anidados. Para ilustraciones extremadamente complejas, considera dividirlas en componentes más pequeños para un mejor rendimiento de renderizado en React.
100% gratis · Sin registro · Sin cargas · Compatible offline
