element+iconfont 实现iconPicker组件

在做后台管理项目的时候，有一个功能是侧边栏可配置。可配置项有：名字、路由、图标、权限。其中名字、路由、权限在大神的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" />