svgIcon 组件

<template>

  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">

    <use v-bind:xlink:href="iconName" />

  </svg>

</template>

<script>

export default {

  name: 'SvgIcon',

  props: {

    iconClass: {

      type: [Array, String],

      required: true

    },

    className: {

      type: String,

      default: ''

    }

  },

  computed: {

    iconName() {

      return `#icon-${this.iconClass}`

    },

    svgClass() {

      if (this.className) {

        return 'svg-icon ' + this.className

      } else {

        return 'svg-icon'

      }

    }

  }

}

</script>

<style lang="scss" scoped>

.svg-icon {

  fill: #000;

  flex-shrink: 0;

  height: 24px;

  overflow: hidden;

  width: 24px;

}

</style>