36 lines
650 B
Vue
36 lines
650 B
Vue
<script setup lang="ts">
|
|
import type { ComponentVariant } from "@/types";
|
|
|
|
interface Props {
|
|
icon: string;
|
|
variant: ComponentVariant;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<span :class="['floating-icon', props.variant]">
|
|
<i :class="['fa', `fa-${props.icon}`]" aria-hidden="true" />
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../scss/variables";
|
|
|
|
.floating-icon {
|
|
display: block;
|
|
float: left;
|
|
margin: 0 0.5em 0.25em 0;
|
|
|
|
i {
|
|
font-size: 3em;
|
|
}
|
|
}
|
|
|
|
@each $variant, $color in $variant-colors {
|
|
.floating-icon.#{$variant} {
|
|
color: $color;
|
|
}
|
|
}
|
|
</style>
|