angular fontawesome 库复合名称并使用常规图标

Question

我在使用 fontawesome 库复合名称时遇到问题，即 faEyeSlash 查看下面的 IconEyeSlashComponent 组件。

我也在寻找一种使用常规图标的方法。

它的使用方法是什么？

有没有办法使用常规图标？

import { Component, ChangeDetectionStrategy } from '@angular/core';

import { library } from '@fortawesome/fontawesome-svg-core';
import {
  faEnvelope,
  faEye,
  faEyeSlash,
  faKey
} from '@fortawesome/free-solid-svg-icons';

library.add(
  faEnvelope,
  faEye,
  faEyeSlash,
  faKey
);

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'iwdf-icon-envelope',
  template: `<fa-icon [icon]="['fas', 'envelope']"></fa-icon>`,
  styles: [`:host {
    display: inline-block;
  }`]
})
export class IconEnvelopeComponent{}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'iwdf-icon-eye',
  template: `<fa-icon [icon]="['fas', 'eye']"></fa-icon>`,
  styles: [`:host {
    display: inline-block;
  }`]
})
export class IconEyeComponent{}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'iwdf-icon-eyeslash',
  template: `<fa-icon [icon]="['fas', 'eye-slash']"></fa-icon>`,//THIS DOESN?T WORK
  styles: [`:host {
    display: inline-block;
  }`]
})
export class IconEyeSlashComponent{}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'iwdf-icon-key',
  template: `<fa-icon [icon]="['fas', 'key']"></fa-icon>`,
  styles: [`:host {
    display: inline-block;
  }`]
})
export class IconKeyComponent{}

更新

对不起，这是一个错字:(

Answer 1

我是这样使用它们的：

import { faLongArrowAltLeft, IconDefinition } from '@fortawesome/free-solid-svg-icons';

export class MyComponent {
  faLongArrowAltLeft: IconDefinition = faLongArrowAltLeft;
}

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