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 = iconif (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>

ant design分享记录-icon图标自定义菜单图标相关推荐

Ant Design Vue自定义菜单图标时收起菜单文字不隐藏问题
问题:自定义菜单图标时收起菜单文字不隐藏问题代码: <a-menu-item v-for="item in memberMenu" :key="item.path ...
jeecg扩展自定义菜单图标
jeecg扩展自定义菜单图标官方图标扩展文档:http://doc.jeecg.com/2043975 图标扩展 jeecg扩展自定义菜单图标一.登录iconfont并添加项目 1.添加项目 2. ...
Ant Design离线使用Icon图标资源
使用环境:开发环境内网 node + React + antd 第一种方法:[推荐] 第一种方法[原创]: 想在网上找到的第二种方法,试验一下可以.但是我不想失去按需加在css的功能,所以自己 ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
Ant Design项目记录和CSS3的总结和Es6的基本总结
这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍辅助生殖项目主要运用的是Ant.desi ...
苹果风格：分享一组免费的自定义 MacOS 图标
与大家分享我在上网冲浪时发现的令人兴奋的新图标--来自 Ramotion.他们实践最前沿的图标设计理念,为您的应用程序的开发和支持提供全方位的服务.下面分享的这组免费的自定义 MacOS 图标既是来自 ...
ant design vue 当中的表格自定义结构超出隐藏的自适应动态显示省略号
前言我们知道,在ant design vue当中的table组件里面的列表项目,我们一般会使用columns属性定义列表项目,比如下面 export const columns = [{title: ...
【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )
文章目录一.FlutterIcon 下载图标二.自定义 svg 图标生成 ttf 字体文件三.使用下载的 ttf 图标文件四.完整代码示例五.相关资源一.FlutterIcon 下载图标 ...
Ant Design of Vue Icon 图标列表
拷贝插件 yarn add vue-clipboard2// main.js //复制到粘贴板插件 import VueClipboard from 'vue-clipboard2' VueClipb ...

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

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

本过程使用 iconfont.cn上的

设置icon前缀

在src/components/Menu/menu.js里

修改菜单图标

其他地方图标添加方式

ant design分享记录-icon图标自定义菜单图标相关推荐

最新文章

热门文章