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

Question

我有一个 icons.svg 文件，其中似乎包含我需要在 Angular 应用程序中使用的资产。

文件看起来像这样（注意，... 表示由于安全原因省略了数据）：

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

我试图在我的组件 HTML 中引用该文件（如下面的代码所示），但我不知道如何呈现图标。我猜我需要使用上面 svg 代码中显示的id，比如id="icon-add-member-contain-heavy"?

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

Answer 1

在 Angular 中，您应该能够将 svg 渲染为组件。来自角度文档：

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