ant design分享-icon图标自定义菜单图标

本过程使用 iconfont.cn上的

设置icon前缀

import {
          
    Icon } from ant-design-vue;
import Vue from vue

const JihaoIcon = Icon.createFromIconfontCN({
          
   
    scriptUrl://at.alicdn.com/t/xxxxxxxxxxxxxxxx.js
})

Vue.component(jihao-icon, JihaoIcon)
export default JihaoIcon

在src/components/Menu/menu.js里

修改菜单图标

renderIcon (icon) {
          
   
      if (icon === none || icon === undefined) {
          
   
        return null
      }
      const props = {
          
   }
      typeof (icon) === object ? props.component = icon : props.type = icon
      if (props.type && props.type.startsWith(icon_)) {
          
   
        return (
          <JihaoIcon type={
          
   props.type}/>
        )
      }
      return (
        <Icon {
          
   ... {
          
    props } }/>
      )
    },

其他地方图标添加方式

<a-button @click="handleRemove(record)" style="padding: 0 6px;font-size: 12px;height: 26px;">
  <jihao-icon style="font-size: 13px;" title="删除" type="icon_delete_device"></jihao-icon>
  <span style="font-size: 12px;">删除</span>
</a-button>