<template>
  <i v-if="type!=='loading'"
     @click="handleClick"
     :class="`ipub-icon iconfont ${this.type}`"></i>
  <i v-else
     :class="`ipub-loading ipub-icon iconfont iconLoading`"></i>
</template>

<script>
export default {
  name: 'IpubIcon',
  props: {
    type: {
      type: String,
      default: ''
    },
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.ipub-icon.iconfont {
  font-size: 1em;
}
.ipub-loading {
  display: inline-block;
  -webkit-animation: myRotate 2s linear infinite;
  animation: myRotate 2s linear infinite;
}
@-webkit-keyframes myRotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes myRotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
</style>
