覆盖默认的 primeNG 图标而不创建自定义组件

Question

我下面有以下代码。我想要做的是更改出现的图标，同时保留相同的 API（

icon: 'pi pi-check-circle',

参数）。换句话说，我希望对下面的代码进行零编辑，并在屏幕上显示不同的图标。

这可能吗？请告诉我该怎么做。

my.component.html

 <p-toast position="top-left" class="p-toast-position"/>

my.component.ts

this.messageService.add({
      severity: 'success',
      detail: 'Message Content',
      icon: 'pi pi-check-circle',
      sticky: true,
});

我在here寻找解决方案，但都涉及自定义我自己的组件或插入我自己的模板，但这些都是侵入性的，采用它们意味着我需要更多代码才能使用不同的图标。

Answer 1

我找到了问题的答案。 此解决方案假设您使用 icomoon.io 和 SVG 图标。

1. 准备好您的 SVG 图标并前往 icomoon。
2. 上传您的 svg 图标。 icomoon 有助于将它们映射到 unicode 字符。
3. 点击左下角“字体”下方的“下载”。您应该会看到一个包含文件

   icomoon.{woff|svg|ttf|eot}

   的 zip 文件。您还应该看到一个

   demo.html

   文件。

现在你已经准备好了字体。

1. 使用以下代码创建 CSS 文件。如果您不喜欢这个名字，请替换“my-font”。

@font-face {
    font-family: 'my-font';
    font-display: block;
    src: url('./icomoon.eot')  format('embedded-opentype'), url('./icomoon.woff') format('woff'), url('./icomoon.svg') format('svg'), url('./icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.pi {
    font-family: 'my-font';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pi-icon-name {
    content: "<the respective unicode character>"
}

在

pi-icon-name

中，将

<the respective unicode character>

替换为您在

demo.html

上看到的 unicode。如果 unicode 为

e900

，请输入

\e900

2. 确保在主目录中导入 css 文件

   styles.css

然后您将能够使用相同的 API，如下所示：

my.component.ts

this.messageService.add({
      severity: 'success',
      detail: 'Message Content',
      icon: 'pi pi-icon-name',
      sticky: true,
});

注意事项

这会将整个主图标替换为您自己的图标。它不会扩展 Primeicon。