Angular 8中的FontAwesome最佳导入方式？

2024-05-20 • 问答

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

}

如果您有angular.json的脚本中“导入”它，就像我使用bootstrap popper.js和jquery一样，但是在node_modules中找不到它。

那么，还有另一种方法可以更“干净”吗？（不是CDN方式）

[已解决]

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

谢谢大家。

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

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

angular.json中的

2º步骤粘贴到@fortawesome的css和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
        ]

这就是我想要的。这样，您只需将图标（例如：<i class="fas fa-home"></i>）粘贴到html中即可。

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

您尝试过吗？

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（就像我们在角材料中所做的那样），然后导入以及导出其中所需的图标，最后导入该模板app-routing.module中的模块（如果使用路由模块，则将其导入app.module中）。

案例2。如果您正在使用多个功能模块，那么最好的方法是创建shared.module并在shared.module中导入fontawesome-icon.module，然后将该shared.module进一步导入到各个功能部件路由中.module。

如果要处理大量值，还请检查对象和数组的结构分解。

我希望这会有所帮助

文档显示了执行此操作的最佳方法。为什么我们必须分别包含所有模块，是因为在角度上我们只能公开我们正在使用的模块。因为这肯定会影响性能。

例如，您在Fontawesome中有1000个图标，而您仅使用了100个，那么是否值得导入所有1000个图标？

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

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

谢谢..！：）

Angular 8中的FontAwesome最佳导入方式？

[已解决]

an_day 回答：Angular 8中的FontAwesome最佳导入方式？

大家都在问