FontAwesome in Angular 8、最好的导入方式？

Question

我在 angular 8+ 应用程序中使用 fontawesome 5.x，导入图标的系统对我来说非常非常糟糕。我就是这样做的：（就像文档说的 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 个，我认为这太糟糕了。还有另一种更好的导入方法吗？我正在搜索 fontawesome 的 css 文件以在 angular.json 的脚本中“导入它”，就像我对 bootstrap popper.js 和 jquery 所做的那样，但没有找到它node_modules.

那么，有没有另一种方法可以更“干净”地做到这一点？（不是 CDN 方式）

[已解决]

好的，我正在为桌面应用程序导入 fontawesome 库，而不是为 Web 应用程序导入。使用网络应用程序包，我可以像我一样做。

谢谢大家

Answer 1

你试过这个吗？

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. 如果你有一个只有 App Module 的小项目，那么你可以创建一个不同的 fontawesome-icon.module（就像我们在 angular material 中所做的那样）并导入和导出所需的图标，最后在 app-routing.module 中导入此模块（如果您使用的是路由模块，则在 app.module 中导入此模块）。

案例 2。如果您正在使用多个功能模块，那么最好的方法是创建 shared.module 并在 shared.module 中导入 fontawesome-icon.module，然后导入此 shared.module 进一步到各种各自的特征 routing.module.

如果您处理的值很多，还要检查对象和数组的解构。

希望对您有所帮助

Answer 2

文档展示了自行完成此操作的最佳方法。为什么我们必须单独包含所有模块是因为在 angular 中我们只允许公开我们正在使用的模块。因为这肯定会影响性能。

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?

我希望这能澄清您对出口的理解。

不过，如果您愿意，可以为 fontawesome 创建一个不同的模块并将其导入您的主模块。使您的主要模块看起来整洁干净。

谢谢..！ :)

Answer 3

我如何在 Angular8+ 中导入 fontAwesome 图标

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

2º angular.json中的步骤 将路由粘贴到css和@fortawesome的js:

  "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
        ]

这就是我想要的。有了这个你只需要在html.

中粘贴图标（例如：<i class="fas fa-home"></i>）

我认为 post 的另一种方式是用于桌面应用程序。

FontAwesome in Angular 8、最好的导入方式？

FontAwesome in Angular 8, best way to import?

font-awesome

angular

[已解决]