62 lines
1.0 KiB
Vue
62 lines
1.0 KiB
Vue
<template>
|
|
<text class="fa-icon" :class="fontClass" :style="iconStyle">{{ iconChar }}</text>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { FA_ICONS } from '@/utils/fa-icons.js'
|
|
|
|
const props = defineProps({
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'solid'
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: 'inherit'
|
|
},
|
|
size: {
|
|
type: [Number, String],
|
|
default: 16
|
|
}
|
|
})
|
|
|
|
const iconChar = computed(() => FA_ICONS[props.name] || '')
|
|
|
|
const fontClass = computed(() =>
|
|
props.type === 'brands' ? 'fa-font-brands' : 'fa-font-solid'
|
|
)
|
|
|
|
const iconStyle = computed(() => ({
|
|
color: props.color,
|
|
fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,
|
|
lineHeight: 1
|
|
}))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fa-icon {
|
|
display: inline-block;
|
|
font-style: normal;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.fa-font-solid {
|
|
font-family: 'Font Awesome 7 Free';
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
|
|
.fa-font-brands {
|
|
font-family: 'Font Awesome 7 Brands';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
</style>
|