<template>
  <g v-if="useSvg">
    <image
      :x="-radius"
      :y="-radius"
      :height="2 * radius"
      :width="2 * radius"
      :xlink:href="src"
      draggable="false"
    />
  </g>

  <span v-else>
    <img
      :src="src"
      :width="radius"
      :height="radius"
      :class="{ stretch: stretchInContainer }"
      draggable="false"
    />
  </span>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: 'question-mark'
    },
    radius: {
      type: Number,
      default: 20
    },
    useSvg: Boolean,
    stretchInContainer: Boolean
  },

  computed: {
    src() {
      try {
        return require(`@/assets/icons/${this.name}.svg`)
      } catch (err) {
        return require('@/assets/icons/question-mark.svg')
      }
    }
  }
}
</script>

<style lang="sass" scoped>
span img.stretch
  width: 100%
  height: 100%
</style>
