e-icon-picker

# 快速上手

# 浏览器直接使用

<body>
<div id="app">
    <e-icon-picker v-model="icon" clearable/>
    <e-icon :icon-name="icon" />
</div>
<script>
    Vue.use(eIconPicker, {
        FontAwesome: false,
        ElementUI: false,
        eIcon: true,//自带的图标，来自阿里妈妈
        eIconSymbol: false,//是否开启彩色图标
        addIconList: [],
        removeIconList: [],
        zIndex: 3100//选择器弹层的最低层,全局配置
    });
    new Vue({
        el: '#app',
        data: function() {
            return { icon: "" }
        }
    })
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 全局注册

在引入组件时，可以传入一个全局配置对象，该配置对象目前支持FontAwesome、ElementUI、eIcon、eIconSymbol、addIconList和removeIconList，FontAwesome、ElementUI和eIcon可选值有true和false，表示是否使用该组件图标。 eIconSymbol可选值有true和false，表示eIcon图标是否为彩色图标。 addIconList是自定义新增图标名称的数组，removeIconList则是自定义删除图标名称的数组。

在main.js中加入：

import eIconPicker 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: [],
    zIndex: 3100//选择器弹层的最低层,全局配置
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 局部注册

引入e-icon-picker组件

import {EIconPicker} from 'e-icon-picker';
1

在组件components中声明

export default {
    name: 'app',
    components: {EIconPicker},
    data() {
        return {
            icon: '',
            options: {
                FontAwesome: false,
                ElementUI: false,
                eIcon: true,//自带的图标，来自阿里妈妈
                eIconSymbol: true,//是否开启彩色图标
                addIconList: [],
                removeIconList: []
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在局部样式中引入css

<style lang="css" scoped>
@import '~e-icon-picker/lib/index.css';
@import '~font-awesome/css/font-awesome.min.css';
@import '~element-ui/lib/theme-chalk/icon.css';
</style>
1
2
3
4
5

因为EIconPicker中已经局部注册EIcon了，所以使用时不用再特别注册，但如果在EIconPicker组件外使用EIcon，则需要另外注册

引入e-icon-picker组件

import {EIcon} from 'e-icon-picker';
1

在组件components中声明

export default {
    name: 'app',
    components: {EIcon}
}
1
2
3
4

# 使用

<e-icon-picker v-model="icon" :options="options"/>
1

# 显示图标

<e-icon :icon-name="icon"/>
1

完整示例请参考 example (opens new window) 项目 简单使用请参考 example1.vue (opens new window) 文件

# 高级

# 全局设置

在main.js中全局注册是可以加入以下参数：

Vue.use(eIconPicker,
    {
        FontAwesome: true,
        ElementUI: true,
        eIcon: true, 
        eIconSymbol: true,
        zIndex: 3100
    }
);
1
2
3
4
5
6
7
8
9

# 全局添加图标或者删除图标

  • 通过全局配置添加或者删除
Vue.use(eIconPicker, 
    {
        FontAwesome: true,
        ElementUI: true,
        eIcon: true,
        eIconSymbol: true,
        addIconList: [],
        removeIconList: [],
        zIndex: 3100
    }
);
1
2
3
4
5
6
7
8
9
10
11
  • 通过提供的函数进行配置
import eIconPicker, {iconList} from 'e-icon-picker';
Vue.use(eIconPicker);

iconList.addIcon(["el-icon-s-ticket", "el-icon-s-help", "el-icon-s-help"]);//添加图标
iconList.removeIcon(["el-icon-s-ticket"]);//删除图标
1
2
3
4
5

使用示例请参考main.js (opens new window)文件

# 局部添加图标或者删除图标

使用时添加一个ref属性：

<e-icon-picker ref="iconPicker" v-model="icon" :options="options"/>
1

通过ref获取e-icon-picker组件，再调用组件方法：

mounted() {
    this.$refs['iconPicker'].addIcon("fa fa-slack");//组件内动态添加图标
    this.$refs['iconPicker'].removeIcon("fa fa-slack");//组件内动态删除图标
    setTimeout(() => {//通过修改参数进行重新设置组件
        self.options.addIconList.push('el-icon-message-solid');
        self.options.addIconList.push('http://www.icosky.com/images/wj/baidu.gif');//网络图标链接
        self.options.addIconList.push(require("../assets/img/img.png"));//本地图片，名称会是文件的base64内容，所有会很长
        self.options.removeIconList.push('removeIconList');
        console.log("定时任务触发")
    }, 5000);
}
1
2
3
4
5
6
7
8
9
10
11

使用示例请参考example3.vue (opens new window)文件

# 使用iconfont图标

  • 将图标导入到项目中（iconfont.json文件也要导入）
  • 删除iconfont.css中多余的css样式
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
1
2
3
4
5
6
7
  • 获取css的名称
import {analyzingIconForIconfont} from 'e-icon-picker';//引入解析json的函数
import iconfont from "./css/iconfont.json";//引入json文件
import "./css/iconfont.css";//引入css

let forIconfont = analyzingIconForIconfont(iconfont);//解析class
//let forIconfont = eIconSymbol(iconfont);//解析彩色图标
//全局删除增加图标
Vue.use(eIconPicker, 
    {
        FontAwesome: true, 
        ElementUI: true, 
        addIconList: forIconfont.list,
        removeIconList: [], 
        zIndex: 3100
    }
);//全局注册图标
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 使用svg图标

  • 创建图标文件夹src/icons/svg/。
  • 在vue.config.js配置中加入以下代码。
const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    productionSourceMap: true,
    configureWebpack: {
        resolve: {
            alias: {
                '@': resolve('src')
            }
        }
    },
    chainWebpack(config) {
        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons')) //对应刚刚创建文件夹的位置，排除默认的svg图片处理规则
            .end();
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons')) //对应刚刚创建文件夹的位置
            .end()
            .use('svg-sprite-loader')  //处理svg使用的loader，默认自带，如果提示出错，请手动安装
            .loader('svg-sprite-loader')
            .options({
                symbolId: '[name]'
            })
            .end()
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  • 在项目的环境配置文件中加入以下配置

系统会自动加载该目录下的所有svg文件，不支持扫描子文件夹，@对应src文件夹

.env.development 文件

VUE_APP_SVG = '@/icons/svg'
1

.env.production 文件

VUE_APP_SVG = '@/icons/svg'
1

VUE_APP_SVG 只在webpack中使用，如果你使用的是vite，那么可以对getSvg.js代码进行修改，写死或者其他方式来获取svg的id

  • 使用svg图标 在main.js中引入
import eIconPicker from 'e-icon-picker';
//svgIcons 对应的就是图标列表，将图标列表添加到选择器就可以了
import svgIcons from 'e-icon-picker/lib/getSvg';

//全局删除增加图标
Vue.use(eIconPicker, {
    addIconList: svgIcons,
});
1
2
3
4
5
6
7
8
9

如有疑问请参考：example (opens new window)

# 使用其他icon组件替换eIcon

使用方法（svg-icon为admin-element-vue的icon组件）

<e-icon-picker v-model="icon">
    <template #prepend="{icon}">
      <svg-icon
          :iconClass="icon"
          class="disabled"
      />
    </template>
    <template #icon="{icon}">
      <svg-icon
          :iconClass="icon"
          class="disabled"
      />
    </template>
</e-icon-picker>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

自己实现

<e-icon-picker v-model="icon">
  <template #prepend="{icon}">
    <i :class="icon"></i>
  </template>
  <template #icon="{icon}">
    <i :class="icon"></i>
  </template>
</e-icon-picker>
1
2
3
4
5
6
7
8

以#开头的为svg图标，如果自行替换时，可以根据这个进行判断，添加svg图标时也要注意这个问题

感谢元谷 (opens new window) PR 可自定义的icon (opens new window)

上次更新: 2021/11/6 04:47:11

← 常见问题 →