Que son los SVG sprites y como usarlos
Iconos reutilizables
Un SVG sprite agrupa varios iconos en un solo SVG usando <symbol>, y los reutilizas en la pagina con <use>. Asi reduces peticiones y mantienes los iconos en un solo lugar.
1. Define los simbolos
<svg style="display:none"> <symbol id="ic-check" viewBox="0 0 24 24"> <path d="M5 13l4 4L19 7" fill="none" stroke="currentColor" stroke-width="2"/> </symbol> </svg>
2. Usalos con use
<svg class="icono"><use href="#ic-check"></use></svg>
Repite el use donde necesites el icono. Un solo simbolo, muchos usos.
3. Estilo con CSS
Si usas stroke="currentColor" o fill="currentColor", el icono toma el color del CSS:
.icono { width: 24px; height: 24px; color: #6c8cff; }
Ventajas
- Menos peticiones HTTP (todos los iconos en un archivo/bloque).
- Un solo punto para actualizar un icono.
- Estilables y escalables como cualquier SVG.
Crea tus iconos
Diseña cada icono en svgdesk, copia su codigo y envuelvelo en un <symbol> con su id y viewBox.