Conversor de SVG a React
Convierte archivos SVG en componentes de React que puedes pegar en tu proyecto. TypeScript o JavaScript, con props size y title.
Suelta aquí archivos SVG o una carpetaLos archivos se quedan en tu dispositivo
Aún no hay archivos
Los archivos convertidos aparecen aquí. Suelta archivos SVG arriba o prueba con iconos de ejemplo.
Cómo convertir SVG a React
- Suelta tus archivos SVGAñade archivos, una carpeta o pega código SVG.
- Elige TypeScript o JavaScriptFija el tamaño por defecto y si los iconos de un color siguen el color del texto.
- Copia o descargaCopia un componente o descarga todos los archivos con un índice en un ZIP.
Más herramientas gratis
Todas las herramientas- SVG a PNGPNG nítidos en cualquier tamaño, uno o cientos.
- PNG a SVGVectoriza un PNG o JPG en un vector limpio.
- PNG a ICOArchivos .ico de favicon con 16 a 256 px dentro.
- Favicon e iconos de appConjuntos para web, Chrome, iOS y Android.
- SVG a ReactComponentes JSX tipados, listos para pegar.
- Optimizador SVGSVG más ligeros sin perder nada visible.
- Sprite SVGMuchos iconos en un solo sprite.svg.
- Creador de stickersArchivos de stickers para WhatsApp y Telegram.
Preguntas
¿Cómo es el componente?
Una función por icono que devuelve el SVG como JSX. Acepta size, title y cualquier prop de SVG, como className u onClick.
¿Cómo cambio el color del icono?
Los iconos de un color usan currentColor, así que toman el color del texto que los rodea. Cámbialo con CSS o con la prop color.
¿Funciona con Next.js?
Sí. Los componentes son React puro sin dependencias, así que funcionan en Next.js, Vite y Remix.
¿Qué pasa con los degradados y los ids?
Los ids se hacen únicos con useId de React, así que varios iconos con degradados pueden estar en la misma página sin chocar.