在做后台管理项目的时候，有一个功能是侧边栏可配置。可配置项有：名字、路由、图标、权限。其中名字、路由、权限在大神的vue-element-admin中已经有很详细的介绍了，问题就在于icon选择配置（这个做完之后，发现不是很有必要，因为这个项目就内部人员在用，配图表手动输入class名就ok了），具体方案是用element-ui的select组件自定义模板实现icon可视化选择。
功能实现第一步，搜索引擎大法，用baidu、google分别搜索了关键词iconpicker，一大堆搜索结果，有bootstrap的，有layui的，有jquery的。
但他们的icon都是固定的库，不能自己去增删改。而且项目中这几个框架都没有引入，为了一个功能去引入一个库感觉有点不划算（库的OS：谁稀罕你用似的）。
搜索无果后，决定自己动手做一个组件，然后先列出自己想要的几个关键点
icon可维护
增删icon简单
图形化选择
为了后期icon的维护（认真思考后感觉又是一个不是必要的选项）选择了用iconfont，能随时添加删除icon。
然后图形化选择的话，用element-ui自带的select组件就行了
但问题关键在于将iconfont 引入项目
项目引入，直接将iconfont项目下载下来，放到/src/assets/font文件夹中
文件倒是放到本地了，但问题是我如何知道我引入了哪些icon，以及将icon的class名输出到一个数组里，并在项目中可用。
手动粘贴复制倒是可以，但下次再增删几个icon 还要一一对比吗？所以条路肯定不行了。
现在就是要读去iconfont.css中的内容，并将其中的所以class提取出来
第一个我能想到的方法就是，在vue.config.js中使用node.js的api将iconfont.css的文件内容读取出来。
const path = require('path')const rf = require('fs')function resolve (dir) { return path.join(__dirname, dir)}rf.readFile(resolve('src/assets/font/iconfont.css'), 'utf-8', function (err, data) { if (err) { console.log('error') return false } else { console.log(data)})代码确实输出了iconfont.css中的所有内容
然后我需要对这个data进行处理，输出一个数组
const res = data.match(/.iconfont*.+:before/g)提取出icon名，在输出到一个变量中，但问题是从vue.config.js将变量输出到哪去，才能在整个项目中使用呢？localstorage中？
而且在开发环境下能够使用node.js 在生产环境可不行。
所以我采取了一个折中的方法，将这个变量输出到一个文件当中，然后文件中export 这个变量
function replacer (match, p1, p2, p3, offset, string) { // p1 is nondigits, p2 digits, and p3 non-alphanumerics return p2}rf.readFile(resolve('src/assets/font/iconfont.1.css'), 'utf-8', function (err, data) { if (err) { console.log('error') return false } else { const res = data.match(/.iconfont*.+:before/g) icondata = res.map(item => { return `'${item.replace(/(.iconfont-)(.*)(:before)/, replacer)}'` }) icondata = `export default [${icondata.toString()}]` rf.writeFile(resolve('src/utils/icon.js'), icondata, (err) => { if (err) throw err console.log('The file has been saved!') }) }})replacer 函数来源
接下来就是组件的代码了
<template> <el-select :value="icon" filterable placeholder="请选择" @change="handleChange"> <el-option v-for="item in icons" :key="item" :label="item" :value="item"> <span style="float: left"><i class="iconfont" :class="`iconfont-${item}`"></i></span> <span style="float: right; color: #8492a6; font-size: 13px">{{ item }}</span> </el-option> </el-select></template><script>import icons from '@/utils/icon'export default { props: { icon: { type: String, default: "" } }, data () { return { icons, } }, methods: { handleChange(val){ this.$emit('update:icon',val) } },}</script>// 调用<icon-picker :icon.sync="icon" />