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

问题描述 投票:0回答:3

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

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

angular font-awesome
3个回答
2
投票

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

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>

1
投票

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

0
投票

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

这对我有用

© www.soinside.com 2019 - 2024. All rights reserved.