vue-antd-admin的自定义图标

vue-antd-admin的自定义图标问题

找到组件下面的menu/menu.js的renderIcon方法，重写它，代码如下

 renderIcon: function (h, icon, key) {
  if (this.$scopedSlots.icon && icon && icon !== 'none') {
        const vnodes = this.$scopedSlots.icon({icon, key})
        vnodes.forEach(vnode => {
            vnode.data.class = vnode.data.class ? vnode.data.class : []
            vnode.data.class.push('anticon')
        })
        return vnodes
    }

    if (!icon || icon === 'none') return null;

    // 增加 svg 图标支持
    if (icon.indexOf("<svg") === 0) {
        // 仅取出svg代码中path部分
        let path = icon.match(/<path.+?>/)[0];
        // 移除默认填色（否则会导致激活菜单状态下图标颜色不改变问题）
        path = path.replace(/\sfill="#[a-z0-9]{3,6}"/, "");
        // 创建DOM元素
        return h("i", {
            class: "anticon",
            domProps: {
                innerHTML: `<svg viewBox="64 64 896 896" data-icon="" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">${path}</svg>`
            }
        })
    } else if (icon.indexOf("/") !== -1) {
        // 如果通过 require 方式引入的话（不推荐）
        return h('img', {
            class: "action",
            style: {
                width: '1em',
                height: '1em',
                marginRight: '10px'
            },
            domProps: {
                src: icon
            }
        })
    } else {
        return h(Icon, {props: {type: icon}})
    }
    }