如何在 Angular8 库中包含图标等资产?
How to include assets like icons in an Angular8 library?
我一直在尝试将一些资产添加到 Angular 8 库中。
库是使用 ng generate library 创建的,我的目标是包含一些 SVG 格式的图标,以便在 HTML 组件的模板中使用。
到目前为止,我已经尝试将库的资产文件夹添加到父应用程序 angular.json 文件中,但无济于事。在开发我的资产时,无法访问库源根目录下的文件夹。构建库后将文件夹复制到 dist 也不起作用。
将 assets 文件夹包含到库中的正确方法是什么,就像对应用程序所做的那样?我认为这是一个相当频繁的用例,因为组件通常依赖于图标。将 SVG 或 PNG 嵌入 SCSS 文件的方法也足以解决这个用例。
我已经解决了使用 DomSanitizer 和 MatIconRegistry 库将 SVG 图标添加到 app.component.ts 的问题。
app.component.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>
我一直在尝试将一些资产添加到 Angular 8 库中。
库是使用 ng generate library 创建的,我的目标是包含一些 SVG 格式的图标,以便在 HTML 组件的模板中使用。
到目前为止,我已经尝试将库的资产文件夹添加到父应用程序 angular.json 文件中,但无济于事。在开发我的资产时,无法访问库源根目录下的文件夹。构建库后将文件夹复制到 dist 也不起作用。
将 assets 文件夹包含到库中的正确方法是什么,就像对应用程序所做的那样?我认为这是一个相当频繁的用例,因为组件通常依赖于图标。将 SVG 或 PNG 嵌入 SCSS 文件的方法也足以解决这个用例。
我已经解决了使用 DomSanitizer 和 MatIconRegistry 库将 SVG 图标添加到 app.component.ts 的问题。
app.component.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>