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>