¿Qué hace el conversor de SVG a componente?

Transforma un SVG en bruto en un componente reutilizable de React (JSX/TSX) o Vue 3. Además de envolver el SVG en el componente, limpia el código y ajusta los atributos al formato correcto de cada framework.

¿Cómo funciona la conversión a React?

En React, los atributos se convierten a camelCase (por ejemplo, stroke-width pasa a strokeWidth), class pasa a className y el style de texto pasa a un objeto. El SVG se envuelve en un componente funcional que reenvía las props al elemento svg, ideal para sistemas de iconos.

¿Y la conversión a Vue 3?

En Vue 3, el SVG se coloca dentro de un bloque template en un Single File Component con script setup (lang ts). Los atributos permanecen en formato HTML (kebab-case) y el componente reenvía automáticamente los atributos al elemento raíz.

¿Para qué sirve la opción currentColor?

Reemplaza los colores fijos de fill y stroke por currentColor, haciendo que el icono herede el color del texto (la propiedad CSS color). Es esencial en sistemas de iconos porque permite recolorear el icono solo cambiando el color del elemento padre.

¿El componente generado admite TypeScript?

Sí. Elige React (TSX) para generar un componente tipado con SVGProps, o Vue 3, que usa script setup (lang ts). Ambos funcionan en proyectos TypeScript sin ajustes.

¿Mi SVG se envía a algún servidor?

No. Toda la conversión ocurre localmente en tu navegador con JavaScript. Ningún SVG o código se envía a servidores de ToolboxHub.

Conversor de SVG a Componente React y Vue Online Gratis

Sobre el Conversor de SVG a Componente

Pega un SVG en bruto y obtén un componente listo en React (JSX o TSX) o Vue 3. La herramienta limpia el código, convierte los atributos al formato de cada framework (camelCase y className en JSX), puede reemplazar colores por currentColor y eliminar las dimensiones para que el icono escale con CSS. Ideal para crear sistemas de iconos internos. Todo ocurre localmente en tu navegador. Para reducir el tamaño del código, usa nuestro Minificador.

Cómo convertir en 3 pasos

1Pega el código SVG en el campo de entrada.
2Elige el framework (React JSX/TSX o Vue 3) y el nombre del componente.
3Copia o descarga el componente, que se genera al instante mientras editas.

Conversor de SVG a Componente

Componente generado

Sobre el Conversor de SVG a Componente

Cómo convertir en 3 pasos

Preguntas frecuentes