Support svg icons ( no font icons)

[digounet]

Hi, How can we use our svg icons without convert it to fonts? thanks.

[JaZo]

You can use Custom command types to register your own types that add an SVG icon.

It is a little hacky, but I'm using it like this:

const TYPE_DEFAULT = 'defaultWithSvgIcon';
const TYPE_SUBMENU = 'submenuWithSvgIcon';

/**
 * SVG icon for context menu items.
 *
 * @param {{name: String, svgIcon: String}} item
 * @param opt
 * @param root
 */
$.contextMenu.types[TYPE_DEFAULT] = function (item, opt, root) {
    if (item.svgIcon) {
        $(iconRenderer(item.svgIcon, 'context-menu-item__icon '))
            .appendTo(this);
    }

    $('<span />')
        .text(item.name)
        .appendTo(this);
};

/**
 * SVG icon for context submenu items.
 * N.B. This is copied and slightly altered from the original jQuery-contextMenu.
 *
 * @param {{name: String, svgIcon: String, appendTo, $node}} item
 * @param opt
 * @param root
 *
 * @see https://github.com/swisnl/jQuery-contextMenu/blob/605de5e18ce21ccace02c1cac53d62d37e5581bf/src/jquery.contextMenu.js#L1288
 */
$.contextMenu.types[TYPE_SUBMENU] = function (item, opt, root) {
    $.contextMenu.types[TYPE_DEFAULT].call(this, item, opt, root);

    item.appendTo = item.$node;
    item.callback = null;

    this.data('contextMenu', item).addClass('context-menu-submenu');

    $.contextMenu.op.create(item, root);
};