ant design分享记录-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/xxxxxxxxxxxxxx
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)