# 快速上手
# 浏览器直接使用
<body>
<div id="app">
<div>
<e-icon-picker v-model="icon" clearable />
<e-icon :icon-name="icon" />
</div>
</div>
<script>
const App = {
data() {
return {icon: ""};
},
};
const app = Vue.createApp(App);
app.use(eIconPicker, {
FontAwesome: false,
ElementUI: false,
eIcon: true,//自带的图标,来自阿里妈妈
eIconSymbol: false,//是否开启彩色图标
zIndex: 3100
});
app.mount("#app");
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 全局注册
在引入组件时,可以传入一个全局配置对象,该配置对象目前支持FontAwesome
、element-plus
、eIcon
、eIconSymbol
、addIconList
和removeIconList
,FontAwesome
、ElementUI
和eIcon
可选值有true
和false
,表示是否使用该组件图标。
eIconSymbol
可选值有true
和false
,表示eIcon
图标是否为彩色图标。
addIconList
是自定义新增图标名称的数组,removeIconList
则是自定义删除图标名称的数组。
在main.js中加入:
因element-plus的更新,所以以前的图标不能正常使用,组件做了以下调整
import {createApp} from 'vue'
import App from './App.vue'
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 'e-icon-picker/lib/ele/icon.css'; //element-plus 图标库
let app = createApp(App);
app.use(eIconPicker, {
FontAwesome: true,
ElementUI: true,
eIcon: true,//自带的图标,来自阿里妈妈
eIconSymbol: true,//是否开启彩色图标
addIconList: [],
removeIconList: [],
zIndex: 3100//选择器弹层的最低层,全局配置
});
app.mount('#app');
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 局部注册
引入e-icon-picker
组件
import {EIconPicker} from 'e-icon-picker';
在组件components
中声明
export default {
name: 'app',
components: {EIconPicker},
setup() {
let icon = ref("");
let options = ref({FontAwesome: false, ElementUI: true, addIconList: [], removeIconList: []});
return {
icon,
options
}
}
}
2
3
4
5
6
7
8
9
10
11
12
在全局样式中引入css
<style lang="css" scoped>
@import '~e-icon-picker/lib/index.css';
@import '~font-awesome/css/font-awesome.min.css';
@import '~e-icon-picker/lib/ele/icon.css';
</style>
2
3
4
5
因为EIconPicker中已经局部注册EIcon了,所以使用时不用再特别注册,但如果在EIconPicker组件外使用EIcon,则需要另外注册
引入e-icon-picker
组件
import {EIcon} from 'e-icon-picker';
在组件components
中声明
export default {
name: 'app',
components: {EIcon}
}
2
3
4
# 使用
<e-icon-picker v-model="icon" :options="options"/>
# 显示图标
<e-icon :icon-name="icon"/>
完整示例请参考 example (opens new window) 项目 简单使用请参考 example1.vue (opens new window) 文件
# 高级
# 全局设置
在main.js中全局注册是可以加入以下参数:
app.use(eIconPicker,
{
FontAwesome: true,
ElementUI: true,
eIcon: true,
eIconSymbol: true,
zIndex: 3100
}
);
2
3
4
5
6
7
8
9
# 全局添加图标或者删除图标
- 通过全局配置添加或者删除
app.use(eIconPicker,
{
FontAwesome: true,
ElementUI: true,
eIcon: true,
eIconSymbol: true,
addIconList: [],
removeIconList: [],
zIndex: 3100
}
);
2
3
4
5
6
7
8
9
10
11
- 通过提供的函数进行配置
import eIconPicker, {iconList} from 'e-icon-picker';
app.use(eIconPicker);
iconList.addIcon(["el-icon-s-ticket", "el-icon-s-help", "el-icon-s-help"]);//添加图标
iconList.removeIcon(["el-icon-s-ticket"]);//删除图标
2
3
4
5
使用示例请参考main.js (opens new window)文件
# 局部添加图标或者删除图标
使用时添加一个ref属性:
<e-icon-picker ref="iconPicker" v-model="icon" :options="options"/>
通过ref获取e-icon-picker
组件,再调用组件方法:
mounted() {
this.$refs['iconPicker'].addIcon("fa fa-slack");//组件内动态添加图标
this.$refs['iconPicker'].removeIcon("fa fa-slack");//组件内动态删除图标
setTimeout(() => {//通过修改参数进行重新设置组件
this.options.addIconList.push('el-icon-message-solid');
this.options.removeIconList.push('removeIconList');
console.log("定时任务触发")
}, 5000);
}
2
3
4
5
6
7
8
9
使用示例请参考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;
}
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);//解析彩色图标
//全局删除增加图标
app.use(eIconPicker,
{
FontAwesome: true,
ElementUI: true,
addIconList: forIconfont.list,
removeIconList: [],
zIndex: 3100
}
);//全局注册图标
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 使用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()
}
};
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'
.env.production
文件
VUE_APP_SVG = '@/icons/svg'
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';
//全局删除增加图标
app.use(eIconPicker, {
addIconList: svgIcons,
});
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>
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>
2
3
4
5
6
7
8
以
#
开头的为svg
图标,如果自行替换时,可以根据这个进行判断,添加svg
图标时也要注意这个问题