<template>
  <svg :class="iconClass" @click="$emit('click')" :style="iconStyle">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  props: {
    icon: { type: String, required: true },
    className: { type: String },
    size: {
      type: [String, Number],
      default: 16,
    },
  },
  watch: {
    size(val) {
      mIconSize = val + "px";
    },
  },
  computed: {
    iconName() {
      return `#${this.icon}`;
    },
    iconStyle() {
      return {
        width: this.size + "px",
        height: this.size + "px",
      };
    },
    iconClass() {
      return this.className ? ["m-icon", this.className] : ["m-icon"];
    },
  },
};
</script>

<style lang="less">
.m-icon {
  line-height: 0;
  vertical-align: 0;
  fill: currentColor;
  overflow: hidden;
}
</style>