SVG a React

Transforma SVGs en componentes React limpios para apps y design systems.

Arrastra y suelta tu archivo SVG

o haz clic para buscar, o pega el código SVG

Solo acepta archivos .svg

Pega el código SVG con Ctrl+V / Cmd+V

Por qué usar SVG a React

Salida JSX/TSX limpia

Convierte atributos a nombres compatibles con JSX y genera componentes listos para pegar.

Nombres de componente consistentes

Define un nombre en PascalCase para mantener imports claros y una librería de iconos ordenada.

Amigable con design systems

Funciona bien con currentColor y props SVG para theming y reutilización.

Copiar en un clic

Copia el componente y úsalo al instante en tu codebase.

Procesamiento local

Sin subidas: ideal para assets privados.

Iteración rápida

Convierte en segundos para mantener el código al día con diseño.

Cómo convertir SVG a React

Añade tu SVG

Arrastra y suelta o pega el marcado. Se prepara la salida React localmente.

Nombra el componente

Elige un nombre PascalCase y revisa el TSX generado.

Copia el código

Copia y pega el componente en tu proyecto. Guarda iconos en una carpeta compartida para reutilizar.

Preguntas frecuentes: SVG a React

¿Puedo generar TSX para TypeScript?

Sí. La salida está pensada para TypeScript/TSX y puedes ajustar props si lo necesitas.

¿Se preserva viewBox?

Sí. Mantener viewBox ayuda a que el icono escale de forma predecible.

¿Cómo manejo el color (currentColor)?

Usar currentColor permite que el icono herede el color desde CSS o props. Es ideal para theming.

¿Debo optimizar antes?

Suele ser mejor optimizar primero para reducir ruido y evitar atributos innecesarios en el componente.

¿Se suben archivos?

No. Procesamiento local.

¿Es gratis?

Sí. Gratis y sin descargas.

¿Necesito cuenta?

No. Sin registro.

Herramientas SVG relacionadas

Previsualiza y optimiza el SVG antes de convertir, o genera variantes para otras plataformas.

SVG Viewer

Revisa viewBox y dimensiones antes de convertir.

Abrir herramienta

SVG Optimizer

Optimiza el origen para mantener el componente ligero.

Abrir herramienta

Extractor de rutas SVG

Extrae paths para depuración o animaciones.

Abrir herramienta

SVG a React Native

Genera componentes para react-native-svg.

Abrir herramienta

SVG a PNG

Exporta PNGs para documentación o previews.

Abrir herramienta