<template>
  <i class="s-icon" :style="styles" :class="classes" @click="handleClick"></i>
</template>

<script>
// @ is an alias to /src

export default {
  name: 's-icon',
  props: {
    icon: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
    },
    spin: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  watch: {},
  computed: {
    styles() {
      return typeof this.size === 'number' ? `font-size:${this.size}px` : '';
    },
    classes() {
      return ['icon-' + this.icon, this.spin && 's-icon--sipn'];
    },
  },
  methods: {
    handleClick(e) {
      this.$emit('click', e);
    },
  },
};
</script>
