在 Angular 中使用 FontAwesome Pro

Question

我们正在尝试在我们的 Angular 10 应用程序中用专业图标替换免费的 font-awesome 5 图标。 我们目前正在通过 Explicit Reference 像这样导入免费字体（在 component.ts）

import { faLock } from "@fortawesome/free-solid-svg-icons";

但是，当使用专业图标时，似乎没有提供 TypeScript 文件，.d.ts 或 @fortawesome/fontawesome-pro npm 包中似乎包含 ES 模块文件。

我知道我们可以使用 css 解决方案，但我们希望保持明确性和 tree-shaking 的可能性，因为我们只使用了几个图标。

我的问题是；可以在 TS 中导入专业图标吗？免费图标允许这样做，但专业图标不允许，这似乎很奇怪。

Answer 1

不管 font awesome 说明怎么说，你不需要 fortawesome/fontawesome-pro 包。我也为此苦恼过。

你只需要@fortawesome/pro-solid-svg-icons

然后您可以像导入免费版本一样导入它们：

import { faComet } from '@fortawesome/pro-solid-svg-icons';

如果您因 fontawesome-common-types.

的不同而一直在免费版和专业版之间的两个不同 IconDefinition 定义中挣扎，那么这就是相同的解决方案

我认为他们的“安装 Font Awesome 专业版”并不适合使用 angular-fontawesome 的人，这是我感到困惑的地方。