antdv 侧边栏菜单使用 自定义图片svg

renderIcon: function (h, icon, key) {
  if (this.$scopedSlots.icon && icon && icon !== 'none') {
    console.log(this.$scopedSlots);
    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
  } else if(icon && icon.includes('svg')) { // 使用svg图片时
    return h('img', {style: {width: "20px", height: "20px", marginRight: "4px", marginBottom: "4px" }, attrs: {src: icon}})
  } else {
    return !icon || icon == 'none' ? null : h(Icon, {props: {type:  icon}})
  }
},

路由：

informList: {
	path: 'informList',
	name: '通知管理',
	meta: {
		icon: require('@/assets/img/svg/informWay.svg')
	},
	component: view.blank,
},

两种样式（一种还有子菜单，另一种无子菜单）

// 有子菜单
/deep/ .ant-menu-submenu-inline {
  .ant-menu-submenu-title {
    img{
      filter: drop-shadow(rgba(254, 254, 254, 0.65) 100px 0);
      transform: translateX(-100px);
    }
  }
}
/deep/ .ant-menu-submenu-selected {
  .ant-menu-submenu-title {
    img{
      filter: drop-shadow(#fff 100px 0);
      transform: translateX(-100px);
    }
  }
}
// 无子菜单
/deep/ .ant-menu-item {
  a {
    img {
      filter: drop-shadow(rgba(254, 254, 254, 0.65) 100px 0);
      transform: translateX(-100px);
    }
  }
}
/deep/ .ant-menu-item-selected {
  a {
    img {
      filter: drop-shadow(#1583FF 100px 0);
      transform: translateX(-100px);
    }
  }
}

效果：


注：修改svg颜色两个属性

 filter: drop-shadow(#1583FF 100px 0);
 transform: translateX(-100px);

一个人的旅行，一个人的感受，一个人的收获