如何将zip包形式的Font Awesome Pro 6集成到Angular项目中

集成步骤 #

错误原因说明 #

你当前项目使用的是@fortawesome/angular-fontawesome提供的SVG图标渲染方案，而非Font Awesome传统的Web字体/全局JS方案，之前手动引入全局SCSS、JS的操作和现有代码逻辑不兼容，删除图标依赖包后自然会出现TS模块找不到的报错。同时你当前使用的0.9.0版本@fortawesome/angular-fontawesome不支持Font Awesome 6，需要先做版本适配。

正式操作步骤 #

1. 基础依赖版本升级

首先根据你项目的Angular版本，安装兼容Font Awesome 6的@fortawesome/angular-fontawesome和核心依赖：

// package.json 示例（Angular 15+对应0.13.x版本，低版本Angular请选对应兼容版）
"@fortawesome/angular-fontawesome": "^0.13.0",
"@fortawesome/fontawesome-svg-core": "^6.4.0"

执行npm install完成安装，原有免费版图标包可以直接删除。

2. 安装Pro版图标包

你拿到的Pro zip包中会包含各风格图标的npm包tgz压缩文件，将这些tgz文件存放到项目根目录的fa-pro-packages文件夹下，执行本地安装命令即可：

npm install ./fa-pro-packages/fortawesome-pro-solid-svg-icons-6.4.0.tgz ./fa-pro-packages/fortawesome-pro-regular-svg-icons-6.4.0.tgz ./fa-pro-packages/fortawesome-pro-brands-svg-icons-6.4.0.tgz

如果zip包中没有现成的tgz文件，也可以手动将解压后的Pro图标包内容复制到node_modules/@fortawesome/对应路径下。

3. 修改代码导入逻辑

将原有免费版图标包的导入路径替换为Pro版包路径即可，原有图标注册逻辑基本不需要改动：

// 旧导入（删除）
// import {faSpinner, IconDefinition} from '@fortawesome/free-solid-svg-icons';
// import { fas } from '@fortawesome/free-solid-svg-icons';
// import { far } from '@fortawesome/free-regular-svg-icons';
// import { fab } from '@fortawesome/free-brands-svg-icons';

// 新导入
import {faSpinner, IconDefinition} from '@fortawesome/pro-solid-svg-icons';
import { fas } from '@fortawesome/pro-solid-svg-icons';
import { far } from '@fortawesome/pro-regular-svg-icons';
import { fab } from '@fortawesome/pro-brands-svg-icons';

注意：Font Awesome 5到6有部分图标名发生了变更，例如faPencilAlt在6中更名为faPencil，需要检查你用到的图标名是否有变动，对应修改即可。

4. 清理无效配置

删除angular.json中手动添加的全局JS、SCSS引用，@fortawesome/angular-fontawesome的SVG模式会按需打包用到的图标，不需要全局引入资源。

备选方案（Web字体模式） #

如果你坚持用全局引入的Web字体方案，需要将所有项目中用到的<fa-icon>组件、FaIconLibrary注册逻辑全部删除，替换为原生i标签写法：

<!-- 替换前 -->
<fa-icon [icon]="faSpinner"></fa-icon>
<!-- 替换后 -->
<i class="fa-solid fa-spinner"></i>

同时卸载@fortawesome/angular-fontawesome、@fortawesome/fontawesome-svg-core依赖即可，该方案改造成本较高，不推荐。

内容的提问来源于stack exchange，提问作者usr-local-ΕΨΗΕΛΩΝ