Angular + 动态加载的 Fontawesome 图标错误

Question

我正在使用 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;
...}

我尝试了多种选项，但它们似乎无法解决这个问题。

Answer 1

我像这样动态加载我的很棒的图标：

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>

Answer 2

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

Answer 3

我已经用这种方式使用了动态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>

这对我有用