Componente icono para angular mediante SVG Sprites Symbols

Creación de componente Angular para pintado de SVG que permita ajustes de ancho / alto / color mediante un fichero SVG linkado mediante símbolo
Componente icono para angular mediante SVG Sprites Symbols

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;
}

Código en GitHub

Ejemplo en Codesandbox