如何将 SVG 图标与 Syncfusion 组件（如 ContextMenu）一起使用？

Question

我正在使用 Syncfusion 的 Angular Context menu component. I was looking at this demo 并想将我自己的图标添加到组件中。如何添加图标是通过添加 CSS 类.

public menuItems: MenuItemModel[] = [
    {
        text: 'Cut',
        iconCss: 'e-cm-icons e-cut'
    },
    {
        text: 'Copy',
        iconCss: 'e-cm-icons e-copy'
    }
];

这对我来说还不够，因为 the icon set they provide 非常有限。如何将自己的 SVG 图标添加到 ContextMenu 组件？

Answer 1

我们可以使用 iconCss 实现您的要求属性。请参考以下代码片段。

public menuItems: MenuItemModel[] = [
    {
        text: 'File',
        iconCss: "custom-icon file",
        items: [
            { text: 'Open' },
            { text: 'Save' },
            { text: 'Exit' }
        ]
    },
    {
        text: 'Edit',
        items: [
            { text: 'Cut' },
            { text: 'Copy' },
            { text: 'Paste' }
        ]
    },
    {
        text: 'View',
        iconCss: "custom-icon cal",
        items: [
            { text: 'Toolbar' },
            { text: 'Sidebar' }
        ]
    },
    {
        text: 'Tools',
        items: [
            { text: 'Spelling & Grammar' },
            { text: 'Customize' },
            { text: 'Options' }
        ]
    },
    { text: 'Go' },
    { text: 'Help' }
];

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.file {
    background-image: url(image/file.svg);
}

.custom-icon {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    margin: 4px;
}

.cal {
    background-image: url(image/calendar.svg);
}

为了您的参考，我们准备了一个示例：

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app-18175361521317925097

如何将 SVG 图标与 Syncfusion 组件（如 ContextMenu）一起使用？

How to use SVG icons with Syncfusion components such as ContextMenu?

syncfusion

angular