如何在 Angular8 库中包含图标等资产？

Question

我一直在尝试将一些资产添加到 Angular 8 库中。

该库是使用 ng generate 库创建的，我的目标是在 HTML 组件的模板中包含一些 SVG 格式的图标。

到目前为止，我已经尝试将库的资产文件夹添加到父应用程序 angular.json 文件中，但无济于事。在开发我的资产时，在库源根目录的文件夹中无法访问。构建库后将文件夹复制到 dist one 也不起作用。

将资产文件夹包含到库中的正确方法是什么，就像为应用程序所做的那样？我认为这是一个相当常见的用例，因为组件通常依赖于图标。将 SVG 或 PNG 嵌入到 SCSS 文件中的方法也足以解决这个用例。

Answer 1

我已经使用 DomSanitizer 和 MatIconRegistry 库将 SVG 图标添加到 app.component.ts 中解决了这个问题。

应用程序组件.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent  implements OnInit {

  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.matIconRegistry.addSvgIcon(
      `icon-1`,
      this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/icon-1.svg")
    );
    this.matIconRegistry.addSvgIcon(
      `icon-2`,
      this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/icon-2.svg")
    );
    this.matIconRegistry.addSvgIcon(
      `icon-3`,
      this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/icon-3.svg")
    );
    .
    .
    . 
  }

  ngOnInit() {
  }

}

然后在组件的 html 中添加图像，如下所示：

myComponent.component.html

<ul>
        <li>
            <a href="#">
                <mat-icon svgIcon="icon-1"></mat-icon>
                <span>Icon 1</span>
            </a>
        </li>
        <li>
            <a href="#">
                <mat-icon svgIcon="icon-2"></mat-icon>
                <span>Icon 2</span>
            </a>
        </li>
        <li>
            <a href="#">
                <mat-icon svgIcon="icon-3"></mat-icon>
                <span>Icon 3</span>
            </a>
        </li>
    </ul>