FontAwesome в Angular 8, лучший способ импорта?

Question

Я использую fontawesome 5.x в своем угловом приложении 8+, и система для импорта значков мне очень ужасна. Вот как я это делаю: (как в документации говорят https://github.com/FortAwesome/angular-fontawesome)

import { Component, OnInit } from '@angular/core';
import {faHome,faSearch,faArchive,faFileSignature,
    faAddressBook,faUserMd,faDesktop} from '@fortawesome/free-solid-svg-icons/'

@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
faHome = faHome;
faSearch = faSearch;
faArchive = faArchive;
faFileSignature = faFileSignature;
faAddressBook = faAddressBook;
faUserMd = faUserMd;
faDesktop = faDesktop;
constructor() { }

ngOnInit() {
}

}

Это может быть хорошо, если у вас <10 ​​значков, но если у вас +10, я думаю, что это ужасно. Есть ли другой лучший способчтобы импортировать это? Я искал css-файл fontawesome, чтобы «импортировать его» по сценариям <code>angular.json, как я это делал с bootstrap popper.js и jquery, но не нашел его в node_modules.

Итак, есть лиеще один способ сделать это более «чистым»? (не CDN)

[решено]

Хорошо, я импортировал потрясающую библиотеку для настольных приложений, а не для веб-приложений. пакет Я в порядке, делаю, как я.

Спасибо всем.

Answer 1

Как импортировать fontAwesome значки в Angular8 +

1º Шаг npm install --save-dev @fortawesome/fontawesome-free

2º Шаг в angular.json вставить маршрут в cssи js of @fortawesome:

  "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/@fortawesome/fontawesome-free/css/all.min.css" // this
        ],
        "scripts": [ 
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/@fortawesome/fontawesome-free/js/all.min.js" //this
        ]

Это было то, что я хотел. При этом вам нужно всего лишь вставить значок (например: <i class="fas fa-home"></i>) в html.

Другой способ, которым я пишу, был для настольных приложений, я думаю.

Answer 2

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

Например, У вас есть 1000 иконок в Fontawesome, и вы просто используете 100 из них, тогда стоит импортировать все 1000 иконок?

Надеюсь, это прояснит ваше понимание экспорта.

Тем не менее, если вы хотите, вы можете создать другой модуль для fontawesome и импортировать его в свой основной модуль. Так что ваши основные модули выглядят аккуратно и чисто.

Спасибо ..! :)

Answer 3

Вы пробовали это?

import { Component, OnInit } from '@angular/core';
import * as icons from '@fortawesome/free-solid-svg-icons/'

@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {   
  }

}

Это быстрое решение, но не хорошее.

Лучшее решение зависит от структуры вашего проекта.

Случай 1Если у вас небольшой проект только с модулем приложения, то вы можете создать другой модуль fontawesome-icon.module (как мы это делаем в угловом материале) и импортировать, а также экспортировать в него нужные значки и, наконец, импортировать этот модуль в приложение. routing.module (если вы используете модуль маршрутизации, импортируйте его в app.module).

Случай 2. Если вы работаете с несколькими функциональными модулями, тогда лучше всего создать shared.module и импортировать fontawesome-icon.module в shared.module, а затем импортируйте этот shared.module далее в различные соответствующие функции routing.module.

Также проверьте наличие деструктуризации объекта и массива, если вы имеете дело с большим количеством значений.

Надеюсь, это поможет