使用avue图标选择器出现图标无法显示解决
情景：使用avue组件的图标选择器既要实现可以搜索的功能，也要实现正常显示图标达到更换菜单图标的效果。
链接：Avue avue的参考链接 avue版本升级为2.8.0后,图标选择器由原来的avue-select-icon变更为avue-input-icon（带图标搜索功能）
注意：直接引入官网的js数据可以实现搜索功能，但是无法实现菜单图标更改的需求。原因是i标签无法显示#开头的图标。
如果想在实现搜素功能的前提下实现图标展示，我这里做的修改是替换了js数据，换成element官网的icon素材。这样完全实现需求。
{
label: '图标',
list: [
{
label: '工具',
value: 'el-icon-s-tools',
},
{
label: '设置',
value: 'el-icon-setting',
},
{
label: '角色管理',
value: 'el-icon-user-solid',
},
{
label: '角色',
value: 'el-icon-user',
},
{
label: '客户',
value: 'el-icon-s-custom',
},
{
label: '电话',
value: 'el-icon-phone',
},
{
label: '电话呼叫',
value: 'el-icon-phone-outline',
},
{
label: '更多',
value: 'el-icon-more',
},
{
label: '更多1',
value: 'el-icon-more-outline',
},
{
label: '五角星',
value: 'el-icon-star-on',
},
{
label: '五角星1',
value: 'el-icon-star-off',
},
{
label: '商城',
value: 'el-icon-s-goods',
},
{
label: '商城1',
value: 'el-icon-goods',
},
{
label: '帮助',
value: 'el-icon-s-help',
},
{
label: '帮助1',
value: 'el-icon-help',
},
{
label: '减少',
value: 'el-icon-minus',
},
{
label: '添加',
value: 'el-icon-plus',
},
{
label: '检查',
value: 'el-icon-check',
},
{
label: '关闭',
value: 'el-icon-close',
},
{
label: '图片',
value: 'el-icon-picture',
},
{
label: '图片1',
value: 'el-icon-picture-outline',
},
{
label: '图片2',
value: 'el-icon-picture-outline-round',
},
{
label: '上传',
value: 'el-icon-upload',
},
{
label: '上传1',
value: 'el-icon-upload2',
},
{
label: '下载',
value: 'el-icon-download',
},
{
label: '相机',
value: 'el-icon-camera-solid',
},
{
label: '相机1',
value: 'el-icon-camera',
},
{
label: '视频',
value: 'el-icon-video-camera-solid',
},
{
label: '视频1',
value: 'el-icon-video-camera',
},
{
label: '通知',
value: 'el-icon-message-solid',
},
{
label: '通知1',
value: 'el-icon-bell',
},
{
label: '短信',
value: '#icon-duanxin2',
},
{
label: '工具箱',
value: 'el-icon-s-cooperation',
},
{
label: '操作',
value: 'el-icon-s-order',
},
{
label: '屏幕',
value: 'el-icon-s-platform',
},
{
label: '折叠',
value: 'el-icon-s-fold',
},
{
label: '折叠1',
value: 'el-icon-s-unfold',
},
{
label: '折线',
value: 'el-icon-s-operation',
},
{
label: '提升',
value: 'el-icon-s-promotion',
},
{
label: '首页',
value: 'el-icon-s-home',
},
{
label: '释放',
value: 'el-icon-s-release',
},
{
label: '优惠券',
value: 'el-icon-s-ticket',
},
{
label: '管理',
value: 'el-icon-s-management',
},
{
label: '打开',
value: 'el-icon-s-open',
},
{
label: '购物',
value: 'el-icon-s-shop',
},
{
label: '市场',
value: 'el-icon-s-marketing',
},
{
label: '目标',
value: 'el-icon-s-flag',
},
{
label: '信息',
value: 'el-icon-s-comment',
},
{
label: '金融',
value: 'el-icon-s-finance',
},
{
label: '宣布',
value: 'el-icon-s-claim',
},
{
label: '用户',
value: 'el-icon-s-custom',
},
{
label: '提示',
value: 'el-icon-s-opportunity',
},
{
label: '数据',
value: 'el-icon-s-data',
},
{
label: '质检',
value: 'el-icon-s-check',
},
{
label: '全部',
value: 'el-icon-menu',
},
{
label: '分享',
value: 'el-icon-share',
},
{
label: '播放',
value: 'el-icon-video-pause',
},
{
label: '暂停',
value: 'el-icon-video-play',
},
{
label: '刷新',
value: 'el-icon-refresh',
},
{
label: '向后',
value: 'el-icon-refresh-right',
},
{
label: '撤回',
value: 'el-icon-refresh-left',
},
{
label: '完成',
value: 'el-icon-finished',
},
{
label: '排序',
value: 'el-icon-sort',
},
{
label: '全屏',
value: 'el-icon-rank',
},
{
label: '可见',
value: 'el-icon-view',
},
{
label: '日历',
value: 'el-icon-date',
},
{
label: '标记',
value: 'el-icon-edit-outline',
},
{
label: '文件',
value: 'el-icon-folder',
},
{
label: '文件类型',
value: 'el-icon-folder-opened',
},
{
label: '文件添加',
value: 'el-icon-folder-add',
},
{
label: '文件移除',
value: 'el-icon-folder-remove',
},
{
label: '文件删除',
value: 'el-icon-folder-delete',
},
{
label: '文件质检',
value: 'el-icon-folder-checked',
},
{
label: '文件复制',
value: 'el-icon-document-copy',
},
{
label: '票据',
value: 'el-icon-tickets',
},
{
label: '打印',
value: 'el-icon-printer',
},
{
label: '回形针',
value: 'el-icon-paperclip',
},
{
label: '收纳盒',
value: 'el-icon-takeaway-box',
},
{
label: '搜索',
value: 'el-icon-search',
},
{
label: '显示屏',
value: 'el-icon-monitor',
},
{
label: '吸磁',
value: 'el-icon-attract',
},
{
label: '手机',
value: 'el-icon-mobile',
},
{
label: '剪切',
value: 'el-icon-scissors',
},
{
label: '雨伞',
value: 'el-icon-umbrella',
},
{
label: '耳机',
value: 'el-icon-headset',
},
{
label: '刷子',
value: 'el-icon-brush',
},
{
label: '鼠标',
value: 'el-icon-mouse',
},
{
label: '配合',
value: 'el-icon-coordinate',
},
{
label: 'magic',
value: 'el-icon-magic-stick',
},
{
label: '阅读',
value: 'el-icon-reading',
},
{
label: '数据线',
value: 'el-icon-data-line',
},
{
label: '饼图',
value: 'el-icon-pie-chart',
},
{
label: '收藏夹',
value: 'el-icon-collection-tag',
},
{
label: '电影',
value: 'el-icon-film',
},
{
label: '急救箱',
value: 'el-icon-suitcase',
},
{
label: '急救箱1',
value: 'el-icon-suitcase-1',
},
{
label: '收藏夹1',
value: 'el-icon-collection',
},
{
label: '笔记本',
value: 'el-icon-notebook-1',
},
{
label: '笔记本1',
value: 'el-icon-notebook-2',
},
{
label: '卷纸',
value: 'el-icon-toilet-paper',
},
{
label: '办公楼',
value: 'el-icon-office-building',
},
{
label: '学校',
value: 'el-icon-school',
},
{
label: '台灯',
value: 'el-icon-table-lamp',
},
{
label: '首页1',
value: 'el-icon-house',
},
{
label: '禁止抽烟',
value: 'el-icon-no-smoking',
},
{
label: '抽烟',
value: 'el-icon-smoking',
},
{
label: '购物车',
value: 'el-icon-shopping-cart-full',
},
{
label: '购物车1',
value: 'el-icon-shopping-cart-1',
},
{
label: '购物车2',
value: 'el-icon-shopping-cart-2',
},
{
label: '购物袋',
value: 'el-icon-shopping-bag-1',
},
{
label: '购物袋1',
value: 'el-icon-shopping-bag-2',
},
{
label: '礼物',
value: 'el-icon-present',
},
{
label: '卡',
value: 'el-icon-bank-card',
},
{
label: '金钱',
value: 'el-icon-money',
},
{
label: '数据库',
value: 'el-icon-coin',
},
{
label: '钱包',
value: 'el-icon-wallet',
},
{
label: '折扣',
value: 'el-icon-discount',
},
{
label: '折扣1',
value: 'el-icon-price-tag',
},
{
label: '新闻',
value: 'el-icon-news',
},
{
label: '指导',
value: 'el-icon-guide',
},
{
label: 'male',
value: 'el-icon-male',
},
{
label: 'female',
value: 'el-icon-female',
},
{
label: '手指',
value: 'el-icon-thumb',
},
{
label: 'cpu',
value: 'el-icon-cpu',
},
{
label: '链接',
value: 'el-icon-link',
},
{
label: '关联',
value: 'el-icon-connection',
},
{
label: '打开1',
value: 'el-icon-open',
},
{
label: '关闭',
value: 'el-icon-turn-off',
},
{
label: '聊天',
value: 'el-icon-chat-round',
},
{
label: '聊天1',
value: 'el-icon-chat-line-round',
},
{
label: '短信',
value: 'el-icon-chat-square',
},
{
label: '信息',
value: 'el-icon-chat-dot-round',
},
{
label: '信息1',
value: 'el-icon-chat-dot-square',
},
{
label: '信息2',
value: 'el-icon-chat-line-square',
},
{
label: '消息',
value: 'el-icon-message',
},
{
label: 'postcard',
value: 'el-icon-postcard',
},
{
label: '方向',
value: 'el-icon-position',
},
{
label: '静音',
value: 'el-icon-turn-off-microphone',
},
{
label: '语音',
value: 'el-icon-microphone',
},
{
label: '关闭通知',
value: 'el-icon-close-notification',
},
{
label: '帮助',
value: 'el-icon-bangzhu',
},
{
label: '时间',
value: 'el-icon-time',
},
{
label: '截取',
value: 'el-icon-crop',
},
{
label: '目标',
value: 'el-icon-aim',
},
{
label: '关机',
value: 'el-icon-switch-button',
},
{
label: '权限',
value: '#icon-quanxian',
},
{
label: '屏幕',
value: 'el-icon-full-screen',
},
{
label: 'mic',
value: 'el-icon-mic',
},
{
label: '指向盘',
value: 'el-icon-stopwatch',
},
{
label: 'medal',
value: 'el-icon-medal-1',
},
{
label: '奖章',
value: 'el-icon-medal',
},
{
label: '奖杯',
value: 'el-icon-trophy',
},
{
label: '奖杯1',
value: 'el-icon-trophy-1',
},
{
label: '医疗箱',
value: 'el-icon-first-aid-kit',
},
{
label: 'place',
value: 'el-icon-place',
},
{
label: '定位',
value: 'el-icon-location',
},
{
label: '定位1',
value: 'el-icon-location-outline',
},
{
label: '定位2',
value: 'el-icon-location-information',
},
{
label: '闹钟',
value: 'el-icon-alarm-clock',
},
{
label: 'timer',
value: 'el-icon-timer',
},
{
label: '手表',
value: 'el-icon-watch-1',
},
{
label: '手表1',
value: 'el-icon-watch',
},
{
label: '关锁',
value: 'el-icon-lock',
},
{
label: '开锁',
value: 'el-icon-unlock',
},
{
label: '钥匙',
value: 'el-icon-key',
},
{
label: '客服',
value: 'el-icon-service',
},
{
label: '自行车',
value: 'el-icon-bicycle',
},
{
label: '卡车',
value: 'el-icon-truck',
},
{
label: 'sunset',
value: 'el-icon-sunset',
},
],
},当不想要实现搜素功能的时候可以使用avue-icon-select ，整理的js数据为
{
label: '阿里云图标',
list: [
'icon-quanxianguanli',
'icon-yonghuguanli',
'icon-jiaoseguanli',
'icon-web-icon-',
'icon-xitongguanli',
'icon-rizhiguanli',
'icon-navicon-zdgl',
'icon-weibiaoti46',
'icon-miyue',
'icon-shouji',
'icon-miyue',
'icon-denglvlingpai',
'icon-luyou',
'icon-msnui-supervise',
'icon-server',
'icon-wendang',
'icon-gtsquanjushiwufuwuGTS',
'icon-caidanguanli',
'icon-guanwang',
'icon-guanwangfangwen',
'icon-guiji',
'icon-fensiguanli',
'icon-gongzhonghao',
'icon-anniu_weixincaidanlianjie',
'icon-weixincaidan',
'icon-xiaoxiguanli',
'icon-zhexiantu',
'icon-canshu',
'icon-erji-zuhushouye',
'icon-pay6zhifu',
'icon-zhifuqudaoguanli',
'icon-dingdan',
'icon-tuikuan',
'icon-webicon14',
'icon-shouyintai',
'icon-wenjianguanli',
'icon-mysql',
'icon-shejiyukaifa-',
'icon-record',
'icon-biaodanbiaoqian',
],
},图标为：
由于avue-icon-select 跟avue-input-icon 在网上已经官网可以查到的资料基本很少，以上是根据项目文件改的，理解存在误差，若有问题欢迎提出！