feat(lite/component): UI Icon utility component (#6353)
This commit is contained in:
parent
0effc9cfc1
commit
d91f1841c0
28
@xen-orchestra/lite/src/components/ui/UiIcon.vue
Normal file
28
@xen-orchestra/lite/src/components/ui/UiIcon.vue
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
v-if="icon !== undefined"
|
||||||
|
:icon="icon"
|
||||||
|
:spin="busy"
|
||||||
|
class="ui-icon"
|
||||||
|
:fixed-width="fixedWidth"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed } from "vue";
|
||||||
|
import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
|
||||||
|
import { faSpinner } from "@fortawesome/pro-solid-svg-icons";
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
busy?: boolean;
|
||||||
|
icon?: IconDefinition;
|
||||||
|
fixedWidth?: boolean;
|
||||||
|
}>(),
|
||||||
|
{ fixedWidth: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
const icon = computed(() => (props.busy ? faSpinner : props.icon));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="postcss" scoped></style>
|
Loading…
Reference in New Issue
Block a user