快速上手

全局注册

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

在main.js中加入:

import iconPicker from 'e-icon-picker';
import "e-icon-picker/dist/symbol.js"; //基本彩色图标库
import 'e-icon-picker/dist/index.css'; // 基本样式,包含基本图标
import 'font-awesome/css/font-awesome.min.css'; //font-awesome 图标库
import 'element-ui/lib/theme-chalk/icon.css'; //element-ui 图标库

Vue.use(iconPicker, {FontAwesome: true, ElementUI: true, eIcon: true, eIconSymbol: true});//使用e-icon-picker

局部注册

引入e-icon-picker组件

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

在组件components中声明

export default {
    name: 'app',
    components: { EIconPicker},
    data() {
        return {
            icon: '',
            options: {
                FontAwesome: false,
                ElementUI: false,
                eIcon: true,//自带的图标,来自阿里妈妈
                eIconSymbol: true,//是否开启彩色图标
                addIconList: [],
                removeIconList: []
            }
        }
    }
}

在全局样式中引入css

@import 'e-icon-picker/dist/index.css'; //基础样式
@import 'font-awesome/css/font-awesome.min.css'; //font-awesome 图标库
@import 'element-ui/lib/theme-chalk/icon.css'; //element-ui 图标库

使用


显示图标

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

完整示例请参考 example 项目 简单使用请参考 example1.vue 文件

高级

全局设置

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

Vue.use(eIconPicker, {FontAwesome: true, ElementUI: true, eIcon: true, eIconSymbol: true});

具体参数信息,请参考 参数配置

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

  • 通过全局配置添加或者删除
Vue.use(eIconPicker, {FontAwesome: true, ElementUI: true, eIcon: true, eIconSymbol: true, addIconList: [], removeIconList: []});
  • 通过提供的函数进行配置
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"]);//删除图标

使用示例请参考main.js文件

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

使用时添加一个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);
    }

使用示例请参考example3.vue文件

使用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;
}
  • 获取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: []});//全局注册图标

属性配置

具体配置项请参考 参数配置,对应的示例请参考example2.vue文件

使用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()
    }
};
  • 在项目的环境配置文件中加入以下配置

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

.env.development 文件

VUE_APP_SVG = '@/icons/svg'

.env.production 文件

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

//全局删除增加图标
Vue.use(eIconPicker, {
    addIconList: svgIcons,
});

如有疑问请参考:example

使用其他icon组件替换eIcon

使用方法(svg-icon为admin-element-vue的icon组件)


   

   


感谢元谷 PR 可自定义的icon

Copyright © cnovel.club 2020 all right reserved,powered by Gitbook本书发布时间: 2021-02-20 17:51:58

results matching ""

    No results matching ""