Tengo un archivo icons.svg que parece contener activos que necesito usar en mi aplicación Angular.
El archivo se parece a esto (nota, el ... significa datos omitidos por razones de seguridad):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs> <path d="..." id="o"/></defs> <symbol id="icon-add-member-contain-heavy" viewBox="0 0 64 64"> <path d="B0 ... 4A3q"/> </symbol> <symbol id="icon-add-member-contain-light" viewBox="0 0 64 64"> <path d="A5 ... 2i5m" ... ... .../></symbol></svg> Estoy tratando de hacer referencia al archivo en mi componente HTML (como se muestra en el código a continuación), pero no sé cómo representar un icono. Supongo que necesito usar las id que se muestran en el código svg anterior, como id="icon-add-member-contain-heavy" ?
<div> <img src="../../src/assets/icons.svg"> </div>En angular, debería poder representar el svg como un componente. De los documentos angulares:
import { Component } from '@angular/core'; @Component({ selector: 'app-svg', templateUrl: './svg.component.svg', styleUrls: ['./svg.component.css'] }) export class SvgComponent { fillColor = 'rgb(255, 0, 0)'; changeColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); this.fillColor = `rgb(${r}, ${g}, ${b})`; } }