将 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 方式使用。

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

您应该能够从 npm.fontawesome.com download/install 图标包和 fontawesome-svg-core 并将它们提交到存储库，而不是每次都安装它们。为此，您将需要令牌，但如果将来重新生成令牌，应用程序将不会中断。
从 angular-fontawesome 切换到 vanilla Font Awesome 发行版。这不是推荐的方法，但它应该与 <i> 标签一起工作，这些标签被你在存档中的 vanilla Font Awesome JS 代码替换。

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

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

Integrating Font Awesome Pro (zip distribution) with Angular

angular

font-awesome

angular-fontawesome