在 Angular8 中的应用程序中使用 Font Awesome 图标答案

【问题标题】：Use Font Awesome icons across the application in Angular8在 Angular8 中的应用程序中使用 Font Awesome 图标
【发布时间】：2021-02-02 02:33:39
【问题描述】：

我正在开发一个相当大的 Angular 应用程序，并实现了延迟加载模块。在很多组件中，在不同的模块中，我使用来自字体 Awesome 的图标。实际上，图标是单独实现的，如下例所示：

在component.ts中：

import { faChevronDown, faChevronUp, faTimes } from '@fortawesome/free-solid-svg-icons';

public faChevronDown= faChevronDown;

public faChevronDown= faChevronUp;

在component.html中：

<fa-icon class="fa-md" [icon]="faChevronDown"></fa-icon>

因为我开始有很多图标，有时在不同的组件中是相同的，我想知道是否有办法分解这段代码。例如，不是为每个组件中的每个图标声明一个属性，而是某种全局项，我可以在其中存储我想使用的所有图标，并在需要时直接在 HTML 中调用它们。

在this article of the Angular Wiki 之后，我发现 library.add() 方法似乎非常适合此目的，因此我尝试实现它：

在 app.module 中：


import { faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FontAwesomeModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule {

  constructor() {

    library.add(faChevronDown, faChevronUp);

  }

}

在我的 component.html 中：

<fa-icon class="fa-md" icon="faChevronDown"></fa-icon>

但我仍然有错误：在我的显示中我没有看到任何图标（屏幕正在显示但我应该看到图标的地方是空的），并且在控制台中我有这个错误：

FontAwesome：fa-icon/fa-duotone-icon 组件需要属性 icon。此警告将在 0.6.0 中成为硬错误。

所以我需要修复它或找到另一个合适的解决方案来分解我的应用程序中的图标。

【问题讨论】：

标签： angular typescript icons angular8 font-awesome

【解决方案1】：

问题可能是因为您没有在使用它的组件中explicity 声明faChevronDown。

你必须有类似的东西

import { faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';

export class YourComponent {
 faChevronDown = faChevronDown;
 ...
}

然后在你的 HTML 模板中

 <fa-icon [icon]="faChevronDown"></fa-icon>

【讨论】：

关键是我不想在每个组件中都导入所有这些，而只在应用程序根模块中导入一次。所以必须在组件中导入图标正是我想要避免的。

【解决方案2】：

您是否在导入 FontAwesomeModule 的同一模块中声明了在其模板中使用 Font Awesome 图标的组件？

按照您的示例，您的模板应如下所示：

<fa-icon class="fa-md" icon="chevron-down"></fa-icon>

您可以通过在 Font Awesome 网站上找到图标来找到您需要使用的适当图标名称。

【讨论】：