问题标签 [angular-fontawesome]

我想将我们公司购买了许可证的 Font Awesome Pro 6 集成到我们的 Angular 项目中。

我的老板给了我 zip 发行版（不是 NPM 私有令牌，需要更新），我想升级@fortawesome/angular-fontawesome以使用专业版。

到目前为止，我们一直在使用免费版本的 FA 以及@fortawesome/free-solid-svg-icons. 特别是，这个库声明了在转译期间使用的 Typescript 符号。

在我拥有（package.json）之前

问题：给定 FA Pro 6 的 zip 文件，其中包含以下内容

如何将字体集成到 Angular 项目中？

到目前为止我尝试过的

我已尝试将 FA 6 Pro 目录解压缩到src/font-awesome-pro中，并从中删除最后 4 个包（上面列出）package.json。

我还希望angular.json手动修改添加 scss 和 js

但我的应用程序无法编译

还

用例只是能够使用字符串中的任何FontAwesome 图标，而不必知道这些图标在运行时之前将是什么，而客户端不必下载它们不会使用的图标。

我正在使用angular-fontawesome，使用此处描述的图标库方法：https ://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/icon-library.md

使用此示例语法：

因此，理想情况下，可以使faCoffee零件动态化。我知道静态分析可以看到它faCoffee正在被导入，所以它知道捆绑它，并且如果它是一个动态变量，它不可能猜出需要什么导出 - 但那时我只是想知道是否Webpack 或任何其他实用程序中的任何内容都允许将代码包含在构建中，但仅在运行时需要时才下载到客户端。

我已经尝试了一些事情。

我知道这种尝试，但这是 Vue，它甚至可能不起作用：https ://github.com/FortAwesome/vue-fontawesome/issues/170#issuecomment-484544272

我知道您可以放弃 tree-shaking 并使用深度导入，如下所述：https ://fontawesome.com/v5/docs/apis/javascript/tree-shaking#alternative-to-tree-shaking-deep-imports

IE

所以我尝试了一种基于https://dmitripavlutin.com/ecmascript-modules-dynamic-import/#1-dynamic-import-of-modules的方法。

这显然有效，然后您可以将 IconDefinition 添加到库中 - 在 switch 语句中，这意味着faCoffee仅在运行时执行代码时才加载包。

但是，如果您尝试做一些动态的事情：

然后很容易理解它不起作用，因为它没有被捆绑。

事实上，import文档还指出，可能实现的最好方法是导入整个文件，请参阅： https ://webpack.js.org/api/module-methods/#dynamic-expressions-in-import https:// javascript.info/modules-dynamic-imports#the-import-expression

这个答案也表明它可能是不可能的：https ://stackoverflow.com/a/55744858/1061602

但是，这表明使用正确的方法可能是可行的： https ://stackoverflow.com/a/65298694/1061602

我可以看到这里有很多关于动态导入和代码拆分的信息，我已经尝试了一些东西，但我不太清楚我应该做什么。https://webpack.js.org/guides/code-splitting/#dynamic-imports

我可以使用其他一些 FontAwesome 插件来代替。

或者，有人可能已经按照以下方式编写了大量的 switch 语句

这也可以解决问题。