如何在Prime组件中使用SVG图标（含FontAwesome Pro SVG）

我们需要使用FontAwesome Pro SVG及其他SVG图标，但在使用PrimeNG的p-menu组件时，由于菜单项通过MenuItem数组代码配置，目前只能依赖FontAwesome的字体/CSS类名方式设置图标。我们希望像FontAwesome Angular组件那样，通过导入SVG图标实例实现代码驱动的图标配置，而非依赖类名。

当前p-menu及MenuItem配置如下：

<p-menu
  #menuElement
  [model]="items"
  [popup]="true"
  appendTo="body"
>
</p-menu>

protected items: MenuItem[] = [
  {
    id: 'ui-session-item-menu-rename',
    label: this.i18nClient.translate(
      'action | session action | rename',
      'Rename',
    ),
    icon: 'fa-solid fa-file-pen',
    command: () => {
      this.editing.set(true)
    },
  },
  {
    id: 'ui-session-item-menu-delete',
    label: this.i18nClient.translate(
      'action | session action | delete',
      'Delete',
    ),
    icon: 'fa-solid fa-trash',
    command: () => {
      this.openDeleteConfirmationModal()
    },
  },
];

理想实现方式参考FontAwesome Angular组件的导入模式：

import { faHeart } from '@fortawesome/free-solid-svg-icons';

export class MyComponent implements OnInit {
    faHeart = faHeart;
}

<fa-icon [icon]="faHeart"></fa-icon>

1. 确认FontAwesome Angular环境配置 #

先安装必要依赖：

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/pro-solid-svg-icons

并在根模块（如app.module.ts）中导入FontAwesomeModule：

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [
    // ...其他模块
    FontAwesomeModule
  ]
})
export class AppModule { }

2. 自定义p-menu菜单项模板 #

通过ng-template覆盖p-menu的菜单项渲染逻辑，把图标区域替换为FontAwesome SVG组件：

<p-menu
  #menuElement
  [model]="items"
  [popup]="true"
  appendTo="body"
>
  <ng-template pTemplate="item" let-item>
    <div class="p-menuitem-content">
      <!-- 渲染SVG图标 -->
      <fa-icon *ngIf="item.iconSvg" [icon]="item.iconSvg" class="p-menuitem-icon"></fa-icon>
      <!-- 兼容原有类名图标（可选保留） -->
      <span *ngIf="!item.iconSvg" class="p-menuitem-icon {{item.icon}}"></span>
      <span class="p-menuitem-text">{{item.label}}</span>
    </div>
  </ng-template>
</p-menu>

3. 扩展MenuItem数组，添加SVG图标字段 #

在MenuItem对象中新增自定义字段iconSvg存储导入的SVG图标实例，同时扩展类型避免报错：

import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { faFilePen, faTrash } from '@fortawesome/pro-solid-svg-icons';
import { MenuItem } from 'primeng/api';

// ...

protected items: (MenuItem & { iconSvg?: IconDefinition })[] = [
  {
    id: 'ui-session-item-menu-rename',
    label: this.i18nClient.translate(
      'action | session action | rename',
      'Rename',
    ),
    iconSvg: faFilePen,
    command: () => {
      this.editing.set(true)
    },
  },
  {
    id: 'ui-session-item-menu-delete',
    label: this.i18nClient.translate(
      'action | session action | delete',
      'Delete',
    ),
    iconSvg: faTrash,
    command: () => {
      this.openDeleteConfirmationModal()
    },
  },
];

4. 调整SVG图标样式（可选） #

如果SVG图标和原字体图标尺寸、间距不一致，添加CSS适配：

.p-menuitem .fa-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.75rem;
  color: var(--text-color);
}

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