Angular 8 中的 FontAwesome，最好的导入方式？

Question

I'm using fontawesome 5.x in my angular 8+ app, and the system to import the icons is very very awfull to me. This is how I do: (like documentation say 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() {
}

}

This can be okay if you have < 10 icons, but if you have +10 I think this is awfull. Is there another better way to import this? I was searching the css file of fontawesome to "import it" at scripts of angular.json like I do with bootstrap popper.js and jquery but didnt found it in node_modules.

So, is there another another way to do this more "clean"? (not CDN way)

[Resolved]

Okay I was importing the fontawesome library for desktop apps, no for web apps. With web apps package I'm okay doing like I do.

Thank you all.

Answer 1

How I import fontAwesome icons in Angular8+

1º Step npm install --save-dev @fortawesome/fontawesome-free

2º Step in angular.json paste the route to css and 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
        ]

This was what I wanted. With this you only need to paste the icon (for example: <i class="fas fa-home"></i> ) in html.

The other way I post was for desktop apps I think.

Answer 2

have you try this?

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() {   
  }

}

This is quick solution but not a good one.

Best solution is depend on your project structure.

Case 1. If you have a small project with App Module only then you can create a different fontawesome-icon.module (like we do in the angular material) and import as well export the required icons in that and finally import this module in the app-routing.module (if you are using routing module else import this in app.module).

Case 2. If you are working with multiple feature modules then the best way is to create shared.module and import fontawesome-icon.module in the shared.module and then import this shared.module further to the various respective feature routing.module.

Also check for object and array de-structuring if you are dealing with lots of values.

I hope this will help

Answer 3

Documentation shows the best way to do that itself. Why we have to include all the modules separately is because in angular we are only allowed to expose that module which we are using. Because this will surely affect the performance.

Eg You have 1000 Icons in the Fontawesome and you are just using 100 of it then is it worth so to import all the 1000 Icons?

I hope this clears your understanding about the exports.

Still, if you want you can create a different module for fontawesome and import it to your main module. So that your main modules look neat and clean.

Thanks..: :)