Librería usada
Usando como dependencia de desarrollo la librería https://www.npmjs.com/package/svg-sprite
Definición de tarea script para generación de SVG sprite
Añadiendo script para la generación de SVG partiendo de ficheros SVG independientes:
"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;
}