从 HTML 页面上的 SVG 文件渲染图标

Question

I have an icons.svg file that seems to contain assets that I need to use in my Angular app.

The file looks something like this (note, the ... means omitted data due to security reasons):

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

I am trying to reference the file in my component HTML (as shown in the code below), but I don't know how to render an icon. I am guessing I need to use the id 's that are shown in the above svg code, like id="icon-add-member-contain-heavy" ?

    <div>
      <img src="../../src/assets/icons.svg">
    </div>

Answer 1

In angular, you should be able to render the svg as a component. From the angular docs:

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