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

这发生在所有循环的图标上，奇怪的是，尽管有些图标属于“far”（常规）库，但它会将所有图标解释为来自“fas”（实体）库，因此错误总是显示“prefix=法”。

我正在按照文档的建议实例化组件中的图标：

    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;
...}

我已经尝试了几个选项，但他们似乎并没有解决这个问题。

标签： angularfont-awesome

Answer 1

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

父组件.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() {}
}

父组件.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>