当前位置: 首页 > 工具软件 > e-icon-picker > 使用案例 >

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

谢俊力
2023-12-01

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 //选择器弹层的最低层,全局配置
});
 类似资料: