Angular项目加载FontAwesome 5的faCircle双版本时遇重复标识符错误如何解决？

嘿，这个问题我太熟悉了！你碰到的报错本质是TypeScript不允许同一个作用域里有重名的变量——FontAwesome 5里regular和solid版本的圆形图标默认导出名都是faCircle，直接导入肯定撞车。下面给你一步步解决：

• 第一步：导入时给图标起别名
  在app.component.ts里导入两个版本的图标时，用as关键字给它们分配不同的变量名，避免冲突：

  // 导入常规版本并命名为faCircleRegular
  import { faCircle as faCircleRegular } from '@fortawesome/free-regular-svg-icons';
  // 导入实心版本并命名为faCircleSolid
  import { faCircle as faCircleSolid } from '@fortawesome/free-solid-svg-icons';
  

• 第二步：在组件中注册或声明图标
  根据你的Angular项目风格选择一种方式：
  如果你用的是独立组件（Standalone Component），直接在组件类里声明变量：

  import { Component } from '@angular/core';
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
  import { faCircle as faCircleRegular } from '@fortawesome/free-regular-svg-icons';
  import { faCircle as faCircleSolid } from '@fortawesome/free-solid-svg-icons';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    standalone: true,
    imports: [FontAwesomeModule]
  })
  export class AppComponent {
    // 把别名后的图标暴露给模板
    faCircleRegular = faCircleRegular;
    faCircleSolid = faCircleSolid;
  }
  

  如果你用的是全局图标库注册，就把别名后的图标添加到library里：

  import { library } from '@fortawesome/fontawesome-svg-core';
  import { faCircle as faCircleRegular } from '@fortawesome/free-regular-svg-icons';
  import { faCircle as faCircleSolid } from '@fortawesome/free-solid-svg-icons';
  
  // 全局注册两个版本的图标
  library.add(faCircleRegular, faCircleSolid);
  

• 第三步：在模板中使用不同版本的图标
  现在你可以在HTML模板里分别调用两个图标了：

  <!-- 常规（regular）版本的圆形图标 -->
  <fa-icon [icon]="faCircleRegular"></fa-icon>
  
  <!-- 实心（solid）版本的圆形图标 -->
  <fa-icon [icon]="faCircleSolid"></fa-icon>
  

另外要确认你已经安装了必要的依赖包：@fortawesome/angular-fontawesome、@fortawesome/fontawesome-svg-core，以及对应免费/付费的图标包（比如免费版的@fortawesome/free-regular-svg-icons和@fortawesome/free-solid-svg-icons）。

内容的提问来源于stack exchange，提问作者David Dal Busco