Vue中使用e-icon-picker 图标选择组件(兼容：FontAwesome、iconFont、ElementUI-icon)

Life Free

已于 2022-04-13 11:54:25 修改

阅读量2.3k

点赞数

文章标签： javascript 前端 vue.js

于 2022-04-13 11:53:50 首次发布

本文链接：https://blog.csdn.net/weixin_44875693/article/details/124144780

版权

1.引入依赖

npm install e-icon-picker -S

2.main.js配置

import '@/components/IconPicker/index.css';
import '@/components/IconPicker/main.css';
import eIconPicker from 'e-icon-picker';
import { analyzingIconForIconfont } from '@/components/IconPicker';
import iconfontJson from '@/components/iconFont/font_2914719_ev3rhgunhne/fonts/iconfont.json'; // 阿里图标库，下载到本地里面的json文件
let iconFontList = analyzingIconForIconfont(iconfontJson)
import '@/components/iconFont/font_2914719_ev3rhgunhne/css/iconfont.css';
import 'element-ui/lib/theme-chalk/icon.css';  //element-ui 图标库

Vue.use(eIconPicker, {
    FontAwesome: true,
    ElementUI: true,
    eIcon: false, //自带的图标，来自阿里妈妈
    eIconSymbol: false, //是否开启彩色图标
    addIconList: iconFontList.list,
    removeIconList: [],
    zIndex: 3100 //选择器弹层的最低层,全局配置
});