feat(lite): Replace FontAwesomeIcon with UiIcon

@xen-orchestra/lite/src/components/CollectionSorter.vue

@@ -7,7 +7,7 @@
       @remove="emit('removeSort', property)"
     >
       <span class="property">
-        <FontAwesomeIcon :icon="isAscending ? faCaretUp : faCaretDown" />
+        <UiIcon :icon="isAscending ? faCaretUp : faCaretDown" />
         {{ property }}
       </span>
     </UiFilter>
@@ -57,10 +57,11 @@ import {
   faSort,
 } from "@fortawesome/free-solid-svg-icons";
 import FormWidget from "@/components/FormWidget.vue";
-import UiButton from "@/components/ui/UiButton.vue";
 import UiActionButton from "@/components/ui/UiActionButton.vue";
+import UiButton from "@/components/ui/UiButton.vue";
 import UiFilter from "@/components/ui/UiFilter.vue";
 import UiFilterGroup from "@/components/ui/UiFilterGroup.vue";
+import UiIcon from "@/components/ui/UiIcon.vue";
 import UiModal from "@/components/ui/UiModal.vue";
 import useModal from "@/composables/modal.composable";
 

@xen-orchestra/lite/src/components/ColumnHeader.vue

@@ -2,7 +2,7 @@
   <th>
     <div class="content">
       <span class="label">
-        <FontAwesomeIcon v-if="icon" :icon="icon" />
+        <UiIcon :icon="icon" />
         <slot />
       </span>
     </div>
@@ -11,6 +11,7 @@
 
 <script lang="ts" setup>
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from "@/components/ui/UiIcon.vue";
 
 defineProps<{
   icon?: IconDefinition;

@xen-orchestra/lite/src/components/FormWidget.vue

@@ -8,7 +8,7 @@
     <span class="widget">
       <span v-if="before || $slots.before" class="before">
         <slot name="before">
-          <FontAwesomeIcon v-if="isIcon(before)" :icon="before" fixed-width />
+          <UiIcon v-if="isIcon(before)" :icon="before" fixed-width />
           <template v-else>{{ before }}</template>
         </slot>
       </span>
@@ -17,7 +17,7 @@
       </span>
       <span v-if="after || $slots.after" class="after">
         <slot name="after">
-          <FontAwesomeIcon v-if="isIcon(after)" :icon="after" fixed-width />
+          <UiIcon v-if="isIcon(after)" :icon="after" fixed-width />
           <template v-else>{{ after }}</template>
         </slot>
       </span>
@@ -27,6 +27,7 @@
 
 <script lang="ts" setup>
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from "@/components/ui/UiIcon.vue";
 
 defineProps<{
   before?: IconDefinition | string | object; // "object" added as workaround

@xen-orchestra/lite/src/components/PowerStateIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <FontAwesomeIcon class="power-state-icon" :class="className" :icon="icon" />
+  <UiIcon :class="className" :icon="icon" class="power-state-icon" />
 </template>
 
 <script lang="ts" setup>
@@ -11,6 +11,7 @@ import {
   faQuestion,
   faStop,
 } from "@fortawesome/free-solid-svg-icons";
+import UiIcon from "@/components/ui/UiIcon.vue";
 import type { PowerState } from "@/libs/xen-api";
 
 const props = defineProps<{
@@ -29,7 +30,7 @@ const icon = computed(() => icons[props.state] ?? faQuestion);
 const className = computed(() => `state-${props.state.toLocaleLowerCase()}`);
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .power-state-icon {
   color: var(--color-extra-blue-d60);
 

@xen-orchestra/lite/src/components/TitleBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="title-bar">
-    <FontAwesomeIcon :icon="icon" class="icon" />
+    <UiIcon :icon="icon" class="icon" />
     <div class="title">
       <slot />
     </div>
@@ -12,6 +12,7 @@
 
 <script lang="ts" setup>
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from "@/components/ui/UiIcon.vue";
 
 defineProps<{
   icon: IconDefinition;

@xen-orchestra/lite/src/components/infra/InfraAction.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="infra-action">
     <slot>
-      <FontAwesomeIcon :icon="icon" fixed-width />
+      <UiIcon :icon="icon" fixed-width />
     </slot>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from "@/components/ui/UiIcon.vue";
 
 defineProps<{
   icon?: IconDefinition;

@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue

@@ -8,7 +8,7 @@
       v-bind="$attrs"
     >
       <a :href="href" class="link" @click="navigate">
-        <FontAwesomeIcon :icon="icon" class="icon" />
+        <UiIcon :icon="icon" class="icon" />
         <div class="text">
           <slot />
         </div>
@@ -23,6 +23,7 @@
 <script lang="ts" setup>
 import type { RouteLocationRaw } from "vue-router";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from "@/components/ui/UiIcon.vue";
 
 defineProps<{
   icon: IconDefinition;

@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue

@@ -2,7 +2,7 @@
   <li class="infra-loading-item">
     <div class="infra-item-label-placeholder">
       <div class="link-placeholder">
-        <FontAwesomeIcon :icon="icon" class="icon" />
+        <UiIcon :icon="icon" class="icon" />
         <div class="loader">&nbsp;</div>
       </div>
     </div>
@@ -11,6 +11,7 @@
 
 <script lang="ts" setup>
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from "@/components/ui/UiIcon.vue";
 
 defineProps<{
   icon: IconDefinition;

@xen-orchestra/lite/src/components/ui/UiFilter.vue

@@ -4,13 +4,14 @@
       <slot />
     </span>
     <span class="remove" @click.stop="emit('remove')">
-      <FontAwesomeIcon :icon="faRemove" class="icon" />
+      <UiIcon :icon="faRemove" class="icon" />
     </span>
   </span>
 </template>
 
 <script lang="ts" setup>
 import { faRemove } from "@fortawesome/free-solid-svg-icons";
+import UiIcon from "@/components/ui/UiIcon.vue";
 
 const emit = defineEmits<{
   (event: "edit"): void;

@xen-orchestra/lite/src/components/ui/UiIcon.vue

@@ -1,10 +1,10 @@
 <template>
   <FontAwesomeIcon
     v-if="icon !== undefined"
+    :fixed-width="fixedWidth"
     :icon="icon"
     :spin="busy"
     class="ui-icon"
-    :fixed-width="fixedWidth"
   />
 </template>
 
@@ -12,6 +12,7 @@
 import { computed } from "vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 const props = withDefaults(
   defineProps<{

@xen-orchestra/lite/src/components/ui/UiModal.vue

@@ -8,11 +8,11 @@
     >
       <div class="container">
         <span v-if="onClose" class="close-icon" @click="emit('close')">
-          <FontAwesomeIcon :icon="faXmark" />
+          <UiIcon :icon="faXmark" />
         </span>
         <div v-if="icon || $slots.icon" class="modal-icon">
           <slot name="icon">
-            <FontAwesomeIcon :icon="icon" />
+            <UiIcon :icon="icon" />
           </slot>
         </div>
         <UiTitle v-if="$slots.title" type="h4">
@@ -38,6 +38,7 @@ import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { useMagicKeys, whenever } from "@vueuse/core";
 import UiButtonGroup from "@/components/ui/UiButtonGroup.vue";
+import UiIcon from "@/components/ui/UiIcon.vue";
 import UiTitle from "@/components/ui/UiTitle.vue";
 
 const props = withDefaults(

@xen-orchestra/lite/src/main.ts

@@ -3,13 +3,11 @@ import { createApp } from "vue";
 import App from "@/App.vue";
 import i18n from "@/i18n";
 import router from "@/router";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 const app = createApp(App);
 
 app.use(i18n);
 app.use(createPinia());
 app.use(router);
-app.component("FontAwesomeIcon", FontAwesomeIcon);
 
 app.mount("#root");