SVGView

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

1

Añade tu SVG

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

2

Nombra el componente

Elige un nombre PascalCase y revisa el TSX generado.

3

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

Blog SVG relacionado

Continúa con guías prácticas sobre flujos SVG, resolución de problemas y producción.