Question

GitHub上的自述文件显示了如何从不同包中导入图标。例如：

import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faArrowAltRight } from '@fortawesome/pro-light-svg-icons';
library.add(faCoffee, faArrowAltRight);

但没有示例如何从不同的样式导入相同的图标。我是这样做的：

import { faHome as falHome } from "@fortawesome/pro-light-svg-icons";
import { faHome } from "@fortawesome/pro-regular-svg-icons";
library.add(falHome, faHome);

但这并不漂亮，因为我需要针对所有重复的图标具体as，但是来自不同的样式。

所以，我提出了导入整个lib的想法，但只添加了一些图标：

import * as fal from "@fortawesome/pro-light-svg-icons";
import * as far from "@fortawesome/pro-regular-svg-icons";
library.add(fal.faHome, far.faHome);

我不确定在这种情况下我是否可以期待更大的最终尺寸或任何其他性能问题建议不要添加整个库（from GitHub readme）：

您还可以导入整个图标样式。不过要小心！无论你是谁   导入可能会最终使用您不是的图标膨胀您的最终捆绑   使用

library.add(fal, far);

但我没有添加整个库，只是导入。

我做了一些测试并比较了文件大小（main.js）和构建时间。它们大致相同（2280.098 kB vs 2280,988 kB和5:19 vs 5:15）。

但我不是TypeScript或Angular的专家，我想知道这是否应该有效（相同的大小和生产构建时间），或者它只是偶然相同，这可能会在未来发生变化？
我的基本直觉告诉我它不应该是相同的，因为我正在导入整个库。但是我已经阅读了一些关于树摇动的内容并且导入整个库不应该是问题，因为树木抖动会忽略所有未使用的图标（导入）。这是真的吗？

使用图标库导入不同样式的相同图标（FontAwesome5 for Angular）

0 个答案: