王小美 @[email protected]

<template>
  <i :class="faClass" aria-hidden="true" v-on="$listeners" />
</template>

<script>
export default {
  name: 'FaIcon',
  props: {
    iconClass: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    faClass() {
      const id = this.iconClass;
      const keys = ['fab', 'fas', 'far', 'fal', 'fad'];

      let fa = 'fa',
          tag = id;

      if (id.includes(':')) {
        keys.forEach(key => {
          if (id.includes(`:${key}`)) {
            fa = key;
            tag = id.replace(`:${key}`, '');
            return false;
          }
        })
      }

      return `${fa} fa-${tag} ${this.className} fa-icon`
    },
  }
}
</script>

<style scoped>
.fa-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

</style>