Follow

A FontAwesome Vue component

<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>
· · Web · 0 · 1 · 2
Sign in to participate in the conversation
小森林

每个人都有属于自己的一片森林,也许我们从来不曾走过,但它一直在那里,总会在那里。迷失的人迷失了,相逢的人会再相逢。愿这里,成为属于你的小森林。