<template>
    <i v-if="isSymbol" :style="{ fontSize: unitizedSize }">
        <svg class="cbim-symbol-icon" aria-hidden="true">
            <use :xlink:href="`#icon${name}`"></use>
        </svg>
    </i>
    <i v-else :class="`icon${name}`" :style="{ fontSize: unitizedSize }"></i>
</template>

<script>
  export default {
    name: 'CbimIcon',

    props: {
      name: {
        type: String,
        required: true
      },
      symbol: {
        type: [Boolean, String],
        default: ''
      },
      size: {
        type: [Number, String],
        validator: (val) => typeof val === 'number' || typeof val === 'string',
        default: '1.5em'
      }
    },
    computed: {
      isSymbol() {
        return this.symbol === false ?
          false : this.symbol === true ?
            true : this.$CBIM && this.$CBIM.symbol
      },
      unitizedSize() {
        return typeof this.size === 'number' ?  `${this.size}px` : this.size
      }
    }
  };
</script>
