vue-element 图标选择器

安装

npm install e-icon-picker

全局引入，在main.js添加

// 图标选择器
import eIconPicker, {iconList} from 'e-icon-picker';
import "e-icon-picker/lib/symbol.js"; //基本彩色图标库
import 'e-icon-picker/lib/index.css'; // 基本样式，包含基本图标
import 'font-awesome/css/font-awesome.min.css'; //font-awesome 图标库
import 'element-ui/lib/theme-chalk/icon.css'; //element-ui 图标库
//全局删除增加图标
Vue.use(eIconPicker, {
    FontAwesome: true,
    ElementUI: true,
    eIcon: true,//自带的图标，来自阿里
    eIconSymbol: true,//是否开启彩色图标
    addIconList: [],
    removeIconList: []
});

页面调用

e-icon-picker v-model="icon"

在全局App.vue加入样式

[class^="el-icon-fa"], [class*=" el-icon-fa"] {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome !important;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

左侧栏目不展示fontAwesome的图标

左侧菜单组件位置：

src\layout\components\Sidebar\SidebarItem.vue

大约20行左右：

if (icon) {
    if (icon.includes('el-icon')) {
        vnodes.push(……)
    } else if (icon.includes('fa fa-')) { // 支持fontAwesome图标左侧栏目展示
        vnodes.push(……)
    } else {
        vnodes.push(……)
    }
}