vue 下拉框展示 svg 图标

WechatIMG1899.jpg

<template>
  <div class="app-container">
    <div class="icons">
      <div
        v-for="(item, index) in icons"
        :key="index"
        class="svgItem"
        @click="svgClick(item)"
      >
        <svg-icon
          class="icon"
          :icon-class="item"
        />
        <p style="font-size:10px;">{{ item }}</p>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SvgIconAll',
  props: {
    svgName: {
      type: String,
      default: null
    }
  },
  computed: {
    icons() {
      try {
        const data = require.context('@/icons/svg', false, /\.svg$/).keys()
        for (const i in data) {
          data[i] = data[i].replace(/\.\//g, '').replace(/\.svg/g, '')
        }
        return data
      } catch (e) {
        return []
      }
    }
  },
  methods: {
    svgClick(val) {
      this.svgName = val
      this.$emit('svgNameClick', this.svgName)
    }
  }
}
</script>

<style lang="less">
.app-container{
  width: 450px;
  height: 300px;
  padding: 0;
  margin:0;
  overflow: auto;
  .icons{
    width: 450;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .svgItem{
      width: 100px;
      height: 80px;
      margin-left:10px;
      display: flex;
      float: left;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .icon{
        width: 20px;
        height: 20px;
      }
    }
  }
}

</style>

// 其他页面引入使用
import SvgIconAll from '@/components/svg'

<SvgIconAll @svgNameClick="getSvgName" />

components: {
    SvgIconAll
},