将 Font Awesome Pro（zip 分发）与 Angular 集成

Question

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

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

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

之前我有 (package.json)

    "@fortawesome/angular-fontawesome": "^0.9.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",

问题：FA Pro 6 的 zip 文件包含以下内容

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

到目前为止我已经尝试过什么

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

我也期待修改angular.json手动添加scss和js

            "scripts": [
              ...
              "./src/font-awesome-pro/js/fontawesome.js",
              ...
            ]

            "styles": [
              ...
              "./src/font-awesome-pro/scss/fontawesome.scss",
              "./src/styles.scss"

但我的应用程序无法编译

Error: src/app/shared/shared-components/spinner-block/spinner-block.component.ts:5:41 - error TS2307: Cannot find module '@fortawesome/free-solid-svg-icons' or its corresponding type declarations.

5 import {faSpinner, IconDefinition} from '@fortawesome/free-solid-svg-icons';
                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

还有

export class AmlcFontAwesomeModule {
  constructor(library: FaIconLibrary, faConfig: FaConfig) {
    // Add an icon to the library for convenient access in other components
    library.addIconPacks(far, fas, fab);
    library.addIcons(fa.faPencilAlt, fa.faRecycle, fa.faTrash, fa.faUser, fa.faLock, fa.faHome);
    faConfig.fixedWidth = true;
  }
}

Answer 1

我认为网站上的可下载资源不适用于angular-fontawesome 库。它们旨在以经典的 HTML 方式使用。

首先我会尝试说服你的老板给你令牌。除非有人单击网站上的“重新生成”按钮，否则我认为它实际上不会改变。如果不可能，我认为您有两种选择：

1. 您应该能够从npm.fontawesome.com 下载/安装图标包和fontawesome-svg-core 并将它们提交到存储库，而不是每次都安装它们。为此，您将需要令牌，但如果将来重新生成令牌，应用程序不会中断。

2. 从 angular-fontawesome 切换到 vanilla Font Awesome 发行版。这不是推荐的方式，但它应该与 <i> 标记一起使用，这些标记被您拥有的存档中的 vanilla Font Awesome JS 代码替换。

还链接this issue，因为它有类似的讨论。