我们如何在 Prime 中使用 SVG 图标？

Question

我们需要使用 FontAwesome Pro SVG（以及其他 SVG 图标）。但是，某些 UI 元素是在代码中构建的，而不是在模板中构建的。我们的开发人员告诉我，当我们像这样构建时不可能使用 SVG，因此必须依靠 font/css 方法通过类名使用 FontAwesome。我知道我们可以使用 SVG 的内联和通过模板标签。

这是我们正在使用的设置：

  <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()
      },
    },
  ]

我们已经使用模板标签和内联 HTML 来构建我们的一些 UI，但希望能够利用更多面向代码的设计。

Answer 1

将 SVG 转换为类并直接用作配置对象中的类。

.custom-icon {
  width: 25px;
  height: 300px;
  background-image: url("base64 path");
}

SVG 到 Base 64 编码器

参考答案