我正在使用 Angular (8) 的官方 fontawesome 库,当静态命名图标
<fa-icon [icon]="faSearch"></fa-icon>
时,我似乎可以完美地加载图标,但在动态加载与 <fa-icon [icon]="item.icon"></fa-icon>
中相同的属性时则不行,在其中我将收到以下控制台错误:
...
FontAwesome: Could not find icon with iconName=faSearch and prefix=fas. This warning will become a hard error in 0.6.0.
...
这种情况发生在所有循环图标上,奇怪的是,它会将所有图标解释为来自“fas”(实体)库,尽管有些图标属于“far”(常规)库,因此错误始终显示“前缀” =fas”。
我正在按照文档的建议实例化组件中的图标:
import { fas, faSearch, faGlobeEurope } from "@fortawesome/free-solid-svg-icons";
import { far, faFilePdf, faFilePowerpoint, faFileWord, faFileExcel } from "@fortawesome/free-regular-svg-icons";
export class HomeComponent implements OnInit {
constructor(...) { }
far = far;
fas = fas;
faFilePdf = faFilePdf;
faFilePowerpoint = faFilePowerpoint;
faFileWord = faFileWord;
faSearch = faSearch;
faFolder = faFolder;
faGlobeEurope = faGlobeEurope;
faFileExcel = faFileExcel;
...}
我尝试了多种选项,但它们似乎无法解决这个问题。
我像这样动态加载我的很棒的图标:
parent.component.ts
import { Component } from '@angular/core';
import { faTruck } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent {
truckIcon = faTruck;
constructor() {}
}
parent.component.html
<div>
<app-children [icon]="truckIcon"></app-home-card>
</div>
child.component.ts
import { Component, Input } from '@angular/core';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
@Component({
selector: 'app-home-card',
templateUrl: './home-card.component.html',
styleUrls: ['./home-card.component.css'],
})
export class HomeCardComponent {
@Input() icon: IconDefinition | undefined;
constructor() {}
}
child.component.html
<div>
<fa-icon [icon]="icon!"></fa-icon>
</div>
angular-fontawesome 支持动态渲染图标。看看 文档
我稍微调整了一下以满足我的需要:
import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef, Input, OnInit, ComponentRef, ComponentFactory } from '@angular/core';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-font-awesome-renderer',
template: '<ng-container #host></ng-container>'
})
export class FontAwesomeRendererComponent implements OnInit {
@Input() icon: IconDefinition;
@ViewChild('host', {read: ViewContainerRef, static: true }) container: ViewContainerRef;
constructor(private cfr: ComponentFactoryResolver) {
}
ngOnInit(): void {
this.createIcon();
}
private createIcon(): void {
const factory: ComponentFactory<FaIconComponent> = this.cfr.resolveComponentFactory(FaIconComponent);
const componentRef: ComponentRef<FaIconComponent> = this.container.createComponent(factory);
componentRef.instance.icon = this.icon;
componentRef.instance.render();
}
}
我已经用这种方式使用了动态fontawsome图标
home.component.ts
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit, OnDestroy {
// Icons
faCars = faCar;
faToys = faGamepad;
// Define array of Object
const categories: Category[] = [
{
name: 'Cars',
icon: this.faCars,
},
{
name: 'Toys',
icon: this.faGames,
}
];
}
模态类
export class Category {
name: string;
icon: IconDefinition;
}
home.component.html
<div *ngFor="let category of categories>
<fa-icon [icon]="category.icon"></fa-icon>
<span>{{category.name}}</span>
</div>
这对我有用