如何在 Primeng 组件上放置 img 或 svg 而不是图标？答案

【问题标题】：How put img or svg insted icons on Primng components?如何在 Primeng 组件上放置 img 或 svg 而不是图标？
【发布时间】：2021-04-13 08:33:51
【问题描述】：

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

如果放置不可行，是否可以将 Svg 或 Img 转换为图标并将其放入样式中？以及如何把它内联组件的样式？

谢谢。

【问题讨论】：

标签： css angular sass icons primeng

【解决方案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");
    }
}

然后使用like :

{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>

【讨论】：