Блог

Главная - Вопросы по программированию - Используйте потрясающие значки шрифтов во всех приложениях в Angular8

Используйте потрясающие значки шрифтов во всех приложениях в Angular8

#angular #typescript #icons #angular8 #font-awesome

#angular #typescript #Значки #angular8 #шрифт-awesome

Вопрос:

Я работаю над довольно большим приложением angular с внедренными модулями отложенной загрузки. Во многих компонентах, в разных модулях, я использую значки из font 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, когда это необходимо.

Следуя этой статье 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: свойство icon требуется для fa-icon / fa-duotone-icon components . Это предупреждение станет серьезной ошибкой в версии 0.6.0.

Поэтому мне нужно это исправить или найти другое правильное решение для факторизации значков в моем приложении.

Ответ №1:

Проблема, вероятно, в том, что вы не explicity объявили faChevronDown в компоненте, в котором вы его используете.

У вас должно быть что-то вроде

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

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

Затем в вашем HTML-шаблоне

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

Комментарии:

1. Дело в том, что я не хотел, чтобы все эти файлы импортировались в каждом компоненте, а только один раз в корневом модуле приложения. Поэтому необходимость импортировать значок в компонент — это именно то, чего я пытаюсь избежать.

Ответ №2:

Объявляете ли вы компонент, который использует значок Font Awesome в своем шаблоне, в том же модуле, который импортирует FontAwesomeModule ?

В соответствии с вашим примером ваш шаблон должен выглядеть следующим образом:

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

Вы можете найти подходящие названия значков, которые вам нужно использовать, найдя значок на веб-сайте самого Font Awesome.