<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="icon " :class="`icon-${item}`"></i></span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item }}</span>
    </el-option>
  </el-select>
</template>
<script>
  import './iconfont/iconfont.css'
  import './iconfont/iconfont'
  import icons from './icon-font'

  export default {
    name: 'CmsIconFont',
    props: {
      icon: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        icons,
      }
    },
    methods: {
      handleChange(val) {
        this.$emit('update:icon', val)
      }
    },
  }
</script>

<style lang="less">

</style>
