SVG a JSX
Pega un archivo SVG o un icono y obtén un componente React listo para usar. Los atributos se convierten a camelCase, los estilos en línea pasan a ser objetos style, class se convierte en className y se elimina la basura del editor. Añade props spread, tamaño de icono, currentColor o TypeScript con un clic.
Última actualización:
Cómo usar SVG a JSX
- Pega tu código SVG, suelta un archivo .svg en el editor o pulsa Subir.
- Ponle nombre al componente; se rellena automáticamente a partir del nombre del archivo.
- Elige las opciones: estilo de componente, TypeScript, props spread, tamaño y currentColor.
- Revisa el resultado, que se actualiza mientras escribes, y la vista previa de tu SVG.
- Copia o descarga el componente como archivo .jsx o .tsx e impórtalo en tu app de React.
Atributos SVG y sus nombres en JSX
React usa la forma de escribir los atributos de JavaScript (propiedades del DOM). En SVG eso significa sobre todo quitar guiones y dos puntos y poner en mayúscula la letra siguiente. Las conversiones más comunes:
| Atributo SVG | Prop JSX | Atributo SVG | Prop JSX |
|---|---|---|---|
class | className | stroke-width | strokeWidth |
fill-rule | fillRule | clip-rule | clipRule |
stroke-linecap | strokeLinecap | stroke-linejoin | strokeLinejoin |
stroke-dasharray | strokeDasharray | stroke-opacity | strokeOpacity |
fill-opacity | fillOpacity | stop-color | stopColor |
clip-path | clipPath | font-family | fontFamily |
text-anchor | textAnchor | dominant-baseline | dominantBaseline |
xlink:href | xlinkHref (o simplemente href) | xml:space | xmlSpace |
style="fill:red" | style={{ fill: 'red' }} | onclick="…" | eliminado: usa onClick con una función |
Los atributos que ya están en camelCase en SVG, como viewBox, preserveAspectRatio y gradientUnits, no cambian. Los atributos data-* y aria-* también conservan sus guiones.
Cómo usar el componente
Guarda el resultado como CabinIcon.jsx (o .tsx) e impórtalo como cualquier otro componente. Con el props spread activado, todo lo que pases llega al elemento <svg>:
import CabinIcon from './CabinIcon';
<CabinIcon className="nav-icon" aria-hidden="true" />
<CabinIcon width={32} height={32} onClick={openMenu} />Para conjuntos de iconos, combina Icono: 1em × 1em con Usar currentColor: así el icono sigue el tamaño de fuente y el color del texto de donde se coloque, y un solo componente sirve en botones, menús y encabezados sin props adicionales. Mantén únicos los valores id de cada icono (para degradados y clip paths), porque varias copias del mismo SVG en línea en una página comparten el espacio de nombres de id del documento.
Preguntas frecuentes
¿Por qué no puedo pegar un SVG directamente en JSX?
JSX sigue los nombres de propiedades del DOM de JavaScript, no los nombres de atributos HTML. Los atributos SVG con guiones o espacios de nombres como stroke-width, fill-rule y xlink:href deben escribirse como strokeWidth, fillRule y xlinkHref, class debe pasar a className y el style en línea debe ser un objeto. React avisa de los nombres originales o los ignora.
¿Cómo cambio el color del icono desde React?
Activa Usar currentColor. Todos los colores de fill y stroke se sustituyen por currentColor, así que el icono toma el color CSS de su elemento padre: <Icon style={{ color: 'tomato' }} /> o un className que defina color.
¿Qué hace el props spread?
Añade {...props} al <svg> raíz, así que todo lo que pases al componente, como className, width, aria-label u onClick, se aplica al SVG y sobrescribe los valores de atributo predeterminados.
¿Qué hace el tamaño de icono 1em?
Pone el ancho y el alto en 1em para que el icono escale con el tamaño de la fuente que lo rodea, como una fuente de iconos. Se conserva el viewBox (o se crea a partir del ancho y alto originales) para que el dibujo escale correctamente.
¿Funciona con React Native?
El resultado es para React DOM. React Native necesita la librería react-native-svg, cuyos nombres de componente van con mayúscula inicial (Svg, Path, Circle). La conversión de atributos es la misma, así que puedes renombrar los elementos a mano.
¿Se sube mi SVG?
No. Tu navegador analiza y convierte el SVG, y la vista previa se renderiza localmente como imagen, así que los scripts del archivo nunca se ejecutan.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.