El uso de iconos SVG inline puede ensuciar el HTML, y cargar cada icono como una imagen individual genera demasiadas peticiones HTTP. La técnica de SVG Sprites combinada con el elemento <symbol> es una de las formas más eficientes de gestionar sistemas de iconos en la web.
En este artículo, crearemos un componente Angular reutilizable que consume un sprite SVG, permitiendo personalizar fácilmente el tamaño y el color.
1. Generación del Sprite SVG
Para automatizar la creación del sprite (un único archivo .svg que contiene todos tus iconos), utilizaremos la librería svg-sprite.
Añadimos el siguiente script en nuestro package.json. Este comando toma todos los archivos .svg de src/assets/icons/ y genera un sprite de símbolos en src/assets/sprites/.
"scripts": {
"svg-sprite": "svg-sprite -s --symbol-dest src/assets/sprites --symbol-sprite svg-sprite.svg src/assets/icons/*.svg"
}Fichero typescript del componente:
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-svg-icon',
templateUrl: './svg-icon.component.html',
styleUrls: ['./svg-icon.component.scss']
})
export class SvgIconComponent implements OnInit {
@Input() id = '';
@Input() width = '40px';
@Input() height = '40px';
@Input() color = '#414141';
constructor() { }
ngOnInit(): void {
}
}Se define la ID del atributo para obtener la referencia del símbolo, sus dimensiones ancho / alto y color del SVG
Definición del componente
<svg [attr.width]="width" [attr.height]="height" [style.color]="color">
<use [attr.xlink:href]="'/assets/sprites/svg-sprite.svg#' + id"></use>
</svg>Estilo del componente
Lo importante aquí es que al SVG le decimos que su fill es currentColor ya que lo que hacemos en javascript es dar valor a la propiedad color
:host {
display: inline-flex;
}
svg {
fill: currentColor;
}