Angular6项目根据用户输入动态加载@fortawesome图标报错问题

1. 核心原因：你使用的@fortawesome/angular-fontawesome@0.3.0适配FontAwesome 5.x生态，其fa-icon组件的icon入参不支持直接传入faEye这类字符串格式的图标名称。静态引入能正常渲染，是因为你绑定的是从@fortawesome/free-solid-svg-icons导入的IconDefinition类型的实体对象，和字符串类型的图标名完全是两种数据格式。
2. 当你直接把用户输入的字符串绑定到icon属性时，组件内部会默认把字符串解析为图标名称，在已注册的图标集合里查找fas前缀下的对应项，但你没有提前把对应图标注册到可查找的集合里，自然会抛出图标不存在的错误。
3. 额外隐患：你当前安装的@fortawesome/fontawesome-common-types@^6.1.0和其他1.x版本核心包、5.x版本图标包属于跨大版本的不兼容依赖，会引发类型校验冲突，建议先对齐版本。

根据你的业务场景二选一即可：

方案1：图标映射表（官方推荐，产物体积最优） #

适合只需要开放有限个图标供用户选择的场景，支持Tree Shaking，不会把未使用的图标打包进产物。

1. 先修复依赖版本问题，执行命令安装匹配的类型包：

npm install --save-dev @fortawesome/fontawesome-common-types@^0.2.36

2. 在业务组件内提前导入所有允许用户选择的图标，建立图标名到图标对象的映射表：

import { Component } from '@angular/core';
// 导入需要开放的图标
import { faEye, faUser, faHome, IconDefinition } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  // 建立字符串名到图标对象的映射
  private readonly iconMap: Record<string, IconDefinition> = {
    faEye: faEye,
    faUser: faUser,
    faHome: faHome
    // 按相同格式补充所有允许使用的图标
  };

  user = {
    iconClass: ''
  };

  // 写个转换方法，处理图标不存在的兜底
  getIcon(iconName: string): IconDefinition | null {
    return this.iconMap[iconName] ?? null;
  }
}

3. 修改模板绑定逻辑，不要直接绑定用户输入的字符串，改为通过映射表取到真实的图标对象再传入：

<input type="text" size="40" [(ngModel)]="user.iconClass"/>
<fa-icon 
  [icon]="getIcon(user.iconClass)" 
  class="custom-topic-icons" 
  *ngIf="user.iconClass && getIcon(user.iconClass)"
></fa-icon>

方案2：全局注册全量图标（完全动态，无图标数量限制） #

适合需要允许用户输入任意solid图标名称的场景，缺点是会把所有solid风格图标全部打包进产物，包体积会增加200KB+（gzip后）。

1. 同样先修复依赖版本问题，执行方案1里的依赖安装命令对齐版本。
2. 在根模块（通常是AppModule）里把全量solid图标注册到全局图标库：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
// 导入全量solid图标
import * as allSolidIcons from '@fortawesome/free-solid-svg-icons';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // 记得引入FormsModule才能用ngModel
    FontAwesomeModule
  ],
  declarations: [YourComponent],
  bootstrap: [YourComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    // 注册所有solid图标到全局库
    library.addIcons(...Object.values(allSolidIcons));
  }
}

3. 在组件里写个转换方法，把用户输入的faXxx驼峰格式字符串转成组件要求的[前缀, 短横线图标名]元组格式：

parseIcon(inputStr: string): [string, string] | null {
  if (!inputStr?.startsWith('fa')) return null;
  // 把faEye转换为eye，faChevronRight转换为chevron-right
  const iconName = inputStr
    .replace(/^fa/, '')
    .replace(/([A-Z])/g, '-$1')
    .toLowerCase()
    .slice(1);
  return ['fas', iconName];
}

4. 修改模板绑定，传入转换后的元组：

<input type="text" size="40" [(ngModel)]="user.iconClass"/>
<fa-icon 
  [icon]="parseIcon(user.iconClass)" 
  class="custom-topic-icons" 
  *ngIf="parseIcon(user.iconClass)"
></fa-icon>

注意：如果用户输入的图标名不在已注册的图标范围内，两种方案都会返回null，不会抛出控制台错误，只会不渲染图标，符合容错要求。

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