SVG a React
Convierta SVG a React, JSX o TSX
Convierta archivos SVG en marcado JSX, un componente React listo para importar en TypeScript o JavaScript, o un módulo que exporte SVG como una cadena. El convertidor corrige los atributos de JSX, convierte estilos en línea, conserva el viewBox y admite descargas por lotes.
Editando valores predeterminados para nuevos archivos
Vista previa
Sin vista previa. Añade y selecciona archivos para ver resultados.
Aún no hay archivos. Suelta archivos arriba o haz clic en SELECCIONAR ARCHIVOS.
¿Qué es SVG?
SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML. En lugar de píxeles, un SVG describe matemáticamente formas, trazados, rellenos y contornos, de modo que se puede renderizar a cualquier tamaño sin perder calidad.
SVG es el formato vectorial estándar para la web. Todos los navegadores modernos lo admiten de forma nativa y se puede diseñar con CSS o animar con JavaScript o SMIL. Suele ser compacto para logotipos, iconos e ilustraciones, aunque los archivos SVG complejos pueden ocupar bastante espacio.
Cuándo convertir un SVG a React
Los empaquetadores no se ponen de acuerdo sobre qué obtienes al importar un archivo .svg: el marcado en línea, una URL o nada en absoluto si no tienes el loader adecuado. Un componente guardado junto al resto de tu código esquiva ese problema. El icono pasa a ser JSX normal, que pasa la comprobación de tipos, se elimina del paquete final si no se usa y acepta props como cualquier otro componente. La conversión también resuelve lo que JSX necesita y el SVG en bruto no trae: stroke-width pasa a strokeWidth, class pasa a className, xlink:href pasa a xlinkHref y una cadena de estilo en línea pasa a ser un objeto. Activa Usar currentColor y todos los rellenos y trazos heredan la propiedad color de CSS, así que un mismo componente te sirve para todos los colores con los que lo uses.
Cómo convertir un SVG a React en línea
- 1
Suelta tus archivos SVG, o haz clic en SELECCIONAR ARCHIVOS, para añadirlos a la cola. Hasta 40 a la vez.
- 2
Elige JSX, React Component o Cadena SVG, y luego define el nombre del componente, el lenguaje y si quieres usar currentColor. El código generado se actualiza a medida que cambias las opciones.
- 3
Copia el código de la vista previa, o haz clic en GUARDAR TODO para descargar un archivo por cada SVG, en un ZIP cuando la cola tenga más de uno.
Privacidad: tus archivos nunca salen del navegador
La conversión se ejecuta localmente en su navegador usando JavaScript y WebAssembly. No hay carga de archivos ni conversión del lado del servidor, por lo que los archivos que agrega permanecen en su dispositivo.
El procesamiento local ayuda a proteger logotipos confidenciales, documentos internos y obras de arte inéditas de los clientes. Las páginas y el código de conversión se almacenan en caché a medida que los utiliza, por lo que las herramientas que ya ha abierto pueden seguir funcionando sin una conexión de red.
Preguntas frecuentes
¿Cuál es la diferencia entre las tres salidas?
JSX te da solo el marcado svg, para pegarlo dentro de un componente que ya tengas. React Component te da un módulo completo, con las importaciones y la exportación incluidas, listo para guardarlo como HomeIcon.tsx o HomeIcon.jsx. Cadena SVG (TypeScript) es un módulo .ts que exporta el marcado como una cadena de texto simple, para inyectarlo en HTML, en plantillas de correo o en cualquier cosa que no sea React.
¿El componente acepta props como className y onClick?
Sí, mientras la Propagación de props esté activada. El componente recibe React.SVGProps<SVGSVGElement> y lo expande sobre el elemento svg raíz después de los atributos del archivo, así que className, style, onClick, width y aria-label se aplican y anulan lo que dijera el archivo. Activa también forwardRef y una ref llegará hasta el propio elemento svg.
¿Qué cambia Usar currentColor?
Todos los rellenos y trazos que nombran un color se sustituyen por currentColor, así que la ilustración se pinta con el valor al que se resuelva la propiedad color de CSS y pasarle color="red" al componente funciona. fill="none" se deja tal cual, y sigue significando "no pintar". Está desactivado por defecto, porque una ilustración multicolor se aplana a un solo color al activarlo.