angular - Angular8'de uygulama genelinde Font Awesome simgelerini kullanma

Lazy loading modülleri uygulanmış oldukça büyük bir Angular uygulaması üzerinde çalışıyorum. Birçok bileşende, farklı modüllerde, Font Awesome ikonlarını kullanıyorum. Aslında, ikonlar bu örnekteki gibi tek tek uygulanmış durumda:

component.ts içinde:

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

public faChevronDown= faChevronDown;

public faChevronDown= faChevronUp;

component.html'de:

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

Artık çok fazla simgeye sahip olmaya başladığım ve bazen bunlar farklı bileşenlerde aynı olduğu için, bu kodu faktörleştirmenin bir yolu olup olmadığını merak ediyordum. Örneğin, her bileşende her simge için bir özellik tanımlamak yerine, kullanmak istediğim tüm simgeleri depolayabileceğim ve gerektiğinde HTML'de doğrudan çağırabileceğim türden global bir öğe gibi.

Angular Wiki'nin bu makalesini takip ettikten sonra, bu amaç için mükemmel gibi görünen library.add() yöntemini buldum, bu yüzden bunu uygulamayı denedim:

app.module'de:

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

  }

}

ve benim component.html dosyamda:

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

Ama hâlâ hatalarım var: ekranımda herhangi bir simge görmüyorum (ekran görüntüleniyor ama simgeleri görmem gereken yerde boş), ve konsolda bu hatayı alıyorum:

FontAwesome: fa-icon/fa-duotone-icon bileşenleri için icon özelliği gereklidir. Bu uyarı 0.6.0 sürümünde ciddi bir hata haline gelecektir.

Yani bunu düzeltmem veya uygulamamda simgeleri faktörlemek için başka uygun bir çözüm bulmam gerekiyor.

Cevap #1

Sorun muhtemelen, kullandığınız bileşende faChevronDown'i explicity olarak beyan etmemiş olmanızdan kaynaklanıyor.

Senin gibi bir şeye sahip olman gerekir

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

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

O zaman HTML şablonunuzda

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

Cevap #2

Font Awesome simgesini şablonunda kullanan bileşeni, FontAwesomeModule'ü içe aktaran aynı modülde mi beyan ediyorsunuz?

Örneğinize bağlı kalarak, şablonunuz daha sonra aşağıdaki gibi olmalıdır:

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

Kullanmanız gereken uygun simge adlarını, Font Awesome’un kendi web sitesinde simgeyi bularak bulabilirsiniz.