如何在 Primng 组件上放置 img 或 svg 插入图标？

Question

这是 Primeng 页面 https://primefaces.org/primeng/showcase/#/menu 上的组件模型。

如果放不了，能否将Svg或Img转成图标并放入样式中？以及如何内联组件的样式？

谢谢。

Answer 1

.scss 文件：

:host ::ng-deep {
    .custom-icon {
        width: 1rem;
        height: 1rem;
        background-image: url("assets/images/custom-icon.svg");
    }
}

这ng-deep是必要的，因为图标被放置在 primeng 组件的深处

TS：

    items: MenuItem[];

    ngOnInit() {
        this.items = [
            {label: 'New', icon: 'custom-icon'},
        ];
    }

你也可以在 html 中使用它们，比如

<p-tabPanel leftIcon="custom-icon">
   ...
</p-tabPanel>

编辑 如果您想使用多个不同的，您可以执行如下一般操作：scss 文件：

:host ::ng-deep {
    .c-icons {
        width: 1rem;
        height: 1rem;
     }
     
    .first-icon {
        background-image: url("assets/images/first-custom-icon.svg");
    }
     
    .second-icon {
        background-image: url("assets/images/second-custom-icon.svg");
    }
}

然后使用如下：

{label: 'New', icon: 'c-icons first-icon'},
{label: 'Other', icon: 'c-icons second-icon'}

或者

<p-tabPanel leftIcon="c-icons first-icon">
   ...
</p-tabPanel>

<p-tabPanel leftIcon="c-icons second-icon">
   ...
</p-tabPanel>