<template>
  <fragment>
    <div v-if="type==='png'" :class="className" @click="handleClick">
      <img :src="getImagePath" class="object-cover object-center">
    </div>
    <svg v-else aria-hidden="true" :height="size" :width="size" :fill="color" @click="handleClick">
      <use :xlink:href="'#'+name" />
    </svg>
  </fragment>
</template>

<script lang="ts">
import Vue from 'vue'
import { Plugin } from 'vue-fragment'
Vue.use(Plugin)
export default Vue.extend({
  props: {
    type: {
      type: String,
      default: 'png'
    },
    size: {
      type: String,
      default: '14px'
    },
    color: {
      type: String,
      default: '#000000'
    },
    name: {
      type: String,
      default: 'icon-anquanzhongxin89'
    },
    path: String,
    iconName: String,
    className: {
      type: String,
      default: 'w-6.5 h-6.5'
    }
  },
  computed: {
    getImagePath() {
      if (this.path) {
        return this.path
      }
      return require(`@/assets/icons/${this.iconName}.png`)
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
})
</script>

