¿Qué nombres de atributos SVG se convierten para React?

Todos los atributos SVG con guión se convierten a camelCase: stroke-width → strokeWidth, fill-rule → fillRule, clip-rule → clipRule, stroke-linecap → strokeLinecap, entre otros. Los casos especiales class → className y xlink:href → href también se gestionan.

¿Por qué la salida de Vue no convierte los nombres de atributos?

Las plantillas de Vue admiten nativamente los nombres de atributos en kebab-case en elementos SVG — el navegador y el compilador de Vue manejan stroke-width correctamente. No se necesita conversión, lo que mantiene la salida de Vue más cercana al SVG original.

¿Qué hace la prop de tamaño?

El componente generado reemplaza los valores fijos de width y height del SVG por una prop size (por defecto 24). Esto te permite usar el componente a cualquier tamaño: o .

¿Puedo usar el componente React con atributos SVG personalizados?

Sí. El componente React extiende React.SVGProps , por lo que puedes pasar cualquier atributo SVG válido como prop: fill, stroke, className, aria-label, etc. El spread {...props} en el raíz los pasa todos.

¿Qué ocurre con los elementos SVG sin hijos, como ?

Los elementos SVG vacíos comunes (path, circle, rect, ellipse, line, stop y otros) que aparecen como en el código fuente se convierten automáticamente a la forma de autocierre requerida por JSX.

¿Esta herramienta funciona con SVGs multicolor o complejos?

Sí — el convertidor procesa todos los elementos y atributos del SVG, no solo iconos simples de un solo trazo. Se conservan degradados, filtros, máscaras y grupos. La salida es el SVG completo envuelto en un componente, no una versión simplificada.

SVG a Componente

Convierte cualquier SVG en un componente React o Vue listo para producción — con prop de tamaño, atributos JSX y cero dependencias.

Nombre del componente

Framework

Input

Componente generado

Pega código SVG o arrastra un archivo .svg para generar un componente.

Convierte SVG a componentes React o Vue al instante

Copiar un SVG en una base de código React o Vue implica renombrar atributos manualmente, añadir una prop de tamaño y limpiar preámbulos XML. El convertidor SVG a Componente de Zolkit hace todo eso automáticamente — pega tu SVG y obtén un componente limpio y tipado en segundos.

Atributos JSX correctos

Convierte automáticamente los nombres de atributos SVG a sus equivalentes JSX: stroke-width → strokeWidth, fill-rule → fillRule, class → className, y más.

Conversión instantánea

Los resultados se actualizan mientras escribes. JavaScript puro — sin peticiones al servidor, sin librerías pesadas, sin WASM. Solo procesamiento rápido en el navegador.

Soporte para React y Vue

Genera un componente funcional React tipado con SVGProps, o un SFC de Vue con un bloque script setup de la Composition API. Cambia entre frameworks con un clic.

100% Privado

Tu código SVG nunca sale de tu navegador. Todo se convierte en memoria, sin servidor, sin registros y sin recopilación de datos.

Gratis para siempre

Sin cuenta, sin límites de uso, sin muros de pago. Pega tu SVG, copia el componente y listo.

Prop de tamaño incluida

Cada componente generado acepta una prop size (por defecto 24) que controla tanto el ancho como el alto, facilitando su uso a cualquier escala en tu sistema de diseño.

Cómo convertir SVG a componente

1
Pega tu código SVG en el panel de entrada, o arrastra un archivo .svg sobre él.
2
Escribe un nombre para el componente y elige el framework de destino — React (TSX) o Vue (SFC).
3
Copia el código del componente generado o haz clic en Descargar para guardarlo como archivo .tsx o .vue.