Question

我对字体库的化合物名称有疑问，例如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>

角字体库的化合物名称并使用常规图标

更新

1 个答案: