Angular项目中FontAwesome 5如何批量导入全部图标？

嘿，太懂你这种逐个导入图标快烦到崩溃的心情了！之前你试的import * as icons方式没用，其实是因为FontAwesome的ES模块导出结构不是那种能直接用*批量抓取的格式，零散的导出项没法直接传给library.add()。

给你说个靠谱的方法，一次性把整个Solid系列的图标都导入进来：

步骤1：确保依赖安装到位 #

如果还没装Solid系列的包，先执行这个命令：

npm install @fortawesome/fontawesome-free-solid

步骤2：一次性导入并添加到Library #

在你的组件或者核心模块里，这么写就行：

import fontawesome from '@fortawesome/fontawesome';
import { fas } from '@fortawesome/fontawesome-free-solid';

// 可以放在组件的构造函数里，或者模块的ngOnInit钩子中
fontawesome.library.add(fas);

这样就搞定了！之后在模板里用图标时，直接指定图标名和系列就行：

<fa-icon [icon]="['fas', 'bold']"></fa-icon>
<fa-icon [icon]="['fas', 'italic']"></fa-icon>
<fa-icon [icon]="['fas', 'underline']"></fa-icon>

额外补充：多系列图标一次性导入 #

如果还需要Regular、Brands这类其他系列的图标，用同样的逻辑就行：

import { far } from '@fortawesome/fontawesome-free-regular';
import { fab } from '@fortawesome/fontawesome-free-brands';

// 把多个系列都加进library
fontawesome.library.add(fas, far, fab);

重要提醒：打包体积问题 #

虽然这种方式很省事，但要注意——一次性导入全部图标会把整个系列的图标都打包到项目里，会增加最终的bundle大小。如果你的项目只用到少数几个图标，还是推荐按需导入；但如果确实需要大部分图标，这个方法就非常合适啦。

内容的提问来源于stack exchange，提问作者Volodymyr Humeniuk