ant design分享记录-icon图标自定义菜单图标_ant中的menu里面加上icon,如何让图标在菜单文字后面

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
1
2
3
4
5
6
7
8
9

在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 } }/>
      )
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

其他地方图标添加方式

<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>
1
2
3
4