Angular添加Font Awesome免费实心图标faMousePointer失败问题

问题现象 #

在Angular应用中引入Font Awesome免费图标时，执行FaIconLibrary.addIcons()方法批量添加图标，同批次传入的faCity添加成功，但faMousePointer未成功加入图标库。执行本次添加操作前，图标库中已提前加入了大量其他图标。

相关依赖配置 #

"@fortawesome/angular-fontawesome": "^0.7.0",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",

图标模块核心代码 #

import { faMousePointer } from '@fortawesome/free-solid-svg-icons';
import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';

export class IconsModule {
  constructor(faService: FaIconLibrary) {
    faService.addIcons(faMousePointer, faCity);
  }
}

故障原因 #

核心原因是Font Awesome相关依赖版本不兼容：

• @fortawesome/angular-fontawesome@0.7.0是适配Font Awesome 5.x版本的库，对应的@fortawesome/fontawesome-svg-core兼容版本为^1.2.x，不支持Font Awesome 6.x系列的包。
• 当前安装的@fortawesome/fontawesome-svg-core和@fortawesome/free-solid-svg-icons都是6.1.1版本，属于Font Awesome 6大版本，和0.7.0版本的angular-fontawesome存在不兼容的API变更：6.x版本的图标对象内部结构和5.x版本有差异，旧版的图标添加逻辑对部分结构调整的图标会识别失败、静默跳过添加。
• faCity属于Font Awesome 5时期就存在的图标，6.x版本中其对象结构未做大幅调整，因此能被旧逻辑兼容识别；faMousePointer在6.x版本中内部定义有调整，旧逻辑无法识别，因此添加失败。

解决方案 #

二选一即可，推荐统一升级到兼容版本：

1. 升级适配Font Awesome 6：将@fortawesome/angular-fontawesome升级到0.10.0及以上版本，和已安装的6.1.1版本图标、core包对齐。

   npm install @fortawesome/angular-fontawesome@^0.10.0
   

2. 降级到Font Awesome 5：如果不计划升级angular-fontawesome，就把另外两个包降到5.x的最新稳定版，和0.7.0版本的angular-fontawesome对齐。

   npm install @fortawesome/fontawesome-svg-core@^1.2.36 @fortawesome/free-solid-svg-icons@^5.15.4
   

补充：贴出的代码中缺少faCity的导入语句，如果是代码遗漏请补上，否则TypeScript编译阶段会直接抛出未定义变量的错误。

内容的提问来源于stack exchange，提问作者Luka