<template>
  <div class="itf-icon">
    <component @click="$emit('click')" :style="style" :is="iconComponent"></component>
  </div>
</template>
<script>
import { Vue, Prop, Component } from 'vue-property-decorator';
import icons from './icons';

export default @Component({
  name: 'itfIcon',
  components: {
  }
})
class itfIcon extends Vue {
  @Prop({ type: String }) name;
  @Prop([Number, String]) size;
  @Prop(Boolean) new;

  get style() {
    if (this.size) {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`
      };
    }
    return [];
  }

  get iconComponent() {
    const name = this.new ? `nomi-${this.name}` : this.name;
    return icons[name];
  }
}
</script>
