@xen-orchestra/web-core 0.27.0 → 0.29.0

package/lib/components/card/VtsCardRowKeyValue.vue

@@ -49,6 +49,7 @@ const slots = defineSlots<{
     gap: 0.8rem;
     margin-left: auto;
     font-size: 1.6rem;
+    align-items: center;
   }
 }
 </style>

package/lib/components/cell-object/VtsCellObject.vue

@@ -9,7 +9,7 @@
         </span>
         <UiButton
           v-if="isSupported && copiableId"
-          :left-icon="faCopy"
+          left-icon="fa:copy"
           variant="secondary"
           size="small"
           accent="brand"
@@ -25,7 +25,6 @@
 <script lang="ts" setup>
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { faCopy } from '@fortawesome/free-solid-svg-icons'
 import { useClipboard } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/console/VtsActionsConsole.vue

@@ -5,7 +5,7 @@
     accent="brand"
     variant="tertiary"
     size="medium"
-    :left-icon="isFullscreen ? faDownLeftAndUpRightToCenter : faUpRightAndDownLeftFromCenter"
+    :left-icon="isFullscreen ? 'fa:down-left-and-up-right-to-center' : 'fa:up-right-and-down-left-from-center'"
     @click="toggleFullScreen"
   >
     {{ t(isFullscreen ? 'exit-fullscreen' : 'fullscreen') }}
@@ -15,7 +15,7 @@
     accent="brand"
     variant="tertiary"
     size="medium"
-    :left-icon="faArrowUpRightFromSquare"
+    left-icon="fa:arrow-up-right-from-square"
     @click="openInNewTab"
   >
     {{ t('open-console-in-new-tab') }}
@@ -25,7 +25,7 @@
     accent="brand"
     variant="tertiary"
     size="medium"
-    :left-icon="faKeyboard"
+    left-icon="fa:keyboard"
     @click="sendCtrlAltDel"
   >
     {{ t('send-ctrl-alt-del') }}
@@ -36,12 +36,6 @@
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import { useUiStore } from '@core/stores/ui.store'
-import {
-  faArrowUpRightFromSquare,
-  faDownLeftAndUpRightToCenter,
-  faKeyboard,
-  faUpRightAndDownLeftFromCenter,
-} from '@fortawesome/free-solid-svg-icons'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { logicAnd } from '@vueuse/math'
 import { computed } from 'vue'

package/lib/components/copy-button/VtsCopyButton.vue

@@ -5,8 +5,6 @@
 <script setup lang="ts">
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { faCopy } from '@fortawesome/free-regular-svg-icons'
-import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
 import { useClipboard } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -19,5 +17,5 @@ const { t } = useI18n()
 
 const { copy, copied } = useClipboard({ source: () => value })
 
-const icon = computed(() => (copied.value ? faCheckCircle : faCopy))
+const icon = computed(() => (copied.value ? 'fa:check-circle' : 'fa:copy'))
 </script>

package/lib/components/dropdown/DropdownTitle.vue

@@ -4,7 +4,7 @@
  -->
 <template>
   <div class="dropdown-title">
-    <VtsIcon :icon accent="current" />
+    <VtsIcon :name="icon" size="medium" />
     <div class="label c3 semi-bold">
       <slot />
     </div>
@@ -21,12 +21,12 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 import { useI18n } from 'vue-i18n'
 
 withDefaults(
   defineProps<{
-    icon?: IconDefinition
+    icon?: IconName
     selected?: 'all' | 'some' | 'none'
     onToggleSelectAll?: (value: boolean) => void
   }>(),

package/lib/components/icon/VtsIcon.vue

@@ -1,100 +1,56 @@
-<!-- WIP -->
 <template>
-  <UiLoader v-if="busy" class="vts-icon" />
-  <div v-else-if="overlayIcon !== undefined && icon !== undefined" class="vts-icon stacked" :class="accent">
-    <FontAwesomeIcon :fixed-width="fixedWidth" :icon />
-    <FontAwesomeIcon class="overlay-icon" :fixed-width="fixedWidth" :icon="overlayIcon" />
-  </div>
-  <FontAwesomeIcon v-else-if="icon !== undefined" :class="accent" :fixed-width="fixedWidth" :icon class="vts-icon" />
+  <UiLoader v-if="busy" />
+  <DisplayIcon v-else-if="icon" class="vts-icon" :class="className" :icon />
 </template>
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { type IconName, icons } from '@core/icons'
+import { DisplayIcon } from '@core/packages/icon'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
 
-export type IconAccent = 'current' | 'brand' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
+export type IconSize = 'small' | 'medium' | 'large' | 'current'
 
-defineProps<{
-  accent: IconAccent
-  icon?: IconDefinition
-  overlayIcon?: IconDefinition
+const { size, name } = defineProps<{
+  size: IconSize
+  name: IconName | undefined
   busy?: boolean
-  fixedWidth?: boolean
 }>()
-</script>
-
-<style lang="postcss" scoped>
-.vts-icon {
-  &.stacked {
-    display: inline-grid;
-    place-items: center;
-
-    svg {
-      grid-area: 1 / -1;
 
-      &:last-child {
-        font-size: 50%;
-      }
-    }
-  }
-
-  /* COLOR VARIANTS */
-
-  &.current {
-    color: currentColor;
+const className = computed(() =>
+  toVariants({
+    size: size === 'current' ? undefined : size,
+  })
+)
 
-    .overlay-icon {
-      color: var(--color-neutral-background-primary);
-    }
+const icon = computed(() => {
+  if (!name) {
+    return undefined
   }
 
-  &.brand {
-    color: var(--color-brand-item-base);
+  const icon = icons[name]
 
-    .overlay-icon {
-      color: var(--color-brand-txt-item);
-    }
+  if (icon === undefined) {
+    console.warn(`Icon "${name}" not found.`)
   }
 
-  &.info {
-    color: var(--color-info-item-base);
-
-    .overlay-icon {
-      color: var(--color-info-txt-item);
-    }
-  }
-
-  &.success {
-    color: var(--color-success-item-base);
-
-    .overlay-icon {
-      color: var(--color-success-txt-item);
-    }
-  }
-
-  &.warning {
-    color: var(--color-warning-item-base);
+  return icon
+})
+</script>
 
-    .overlay-icon {
-      color: var(--color-warning-txt-item);
-    }
+<style lang="postcss" scoped>
+.vts-icon {
+  &.size--small {
+    font-size: 1.2rem;
   }
 
-  &.danger {
-    color: var(--color-danger-item-base);
-
-    .overlay-icon {
-      color: var(--color-danger-txt-item);
-    }
+  &.size--medium {
+    font-size: 1.6rem;
   }
 
-  &.muted {
-    color: var(--color-neutral-background-disabled);
-
-    .overlay-icon {
-      color: var(--color-neutral-txt-secondary);
-    }
+  &.size--large {
+    font-size: 2rem;
   }
 }
 </style>

package/lib/components/input-wrapper/VtsInputWrapper.vue

@@ -21,11 +21,11 @@
 import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
 import UiLabel, { type LabelAccent } from '@core/components/ui/label/UiLabel.vue'
 import { useRanked } from '@core/composables/ranked.composable.ts'
+import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import type { MaybeArray } from '@core/types/utility.type'
 import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
 import { toArray } from '@core/utils/to-array.utils'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { useArrayMap } from '@vueuse/core'
 import { provide, reactive, useId } from 'vue'
 
@@ -40,7 +40,7 @@ export type InputWrapperController = {
 const { message: _message } = defineProps<{
   label?: string
   learnMoreUrl?: string
-  icon?: IconDefinition
+  icon?: IconName
   message?: InputWrapperMessage
 }>()
 

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -11,7 +11,7 @@
         }"
         accent="brand"
         size="medium"
-        :icon="sidebar.isLocked ? faThumbTackSlash : faThumbTack"
+        :icon="sidebar.isLocked ? 'fa:thumb-tack-slash' : 'fa:thumb-tack'"
         @click="sidebar.toggleLock()"
       />
     </div>
@@ -38,7 +38,6 @@ import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useSidebarStore } from '@core/stores/sidebar.store'
 import { useUiStore } from '@core/stores/ui.store'
-import { faThumbTack, faThumbTackSlash } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
 
 const slots = defineSlots<{

package/lib/components/menu/MenuItem.vue

@@ -15,7 +15,7 @@
       <template #trigger="{ open, isOpen }">
         <MenuTrigger :active="isOpen" :busy="isBusy" :disabled="isDisabled" :icon @click="open">
           <slot />
-          <VtsIcon :fixed-width="false" :icon="submenuIcon" accent="current" class="submenu-icon" />
+          <VtsIcon :name="submenuIcon" size="medium" class="submenu-icon" />
         </MenuTrigger>
       </template>
       <slot name="submenu" />
@@ -28,13 +28,12 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
 import { useDisabled } from '@core/composables/disabled.composable'
+import type { IconName } from '@core/icons'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { computed, inject, ref } from 'vue'
 
 const props = defineProps<{
-  icon?: IconDefinition
+  icon?: IconName
   onClick?: () => any
   disabled?: boolean
   busy?: boolean
@@ -46,7 +45,7 @@ const isParentHorizontal = inject(
 )
 const isDisabled = useDisabled(() => props.disabled)
 
-const submenuIcon = computed(() => (isParentHorizontal.value ? faAngleDown : faAngleRight))
+const submenuIcon = computed((): IconName => (isParentHorizontal.value ? 'fa:angle-down' : 'fa:angle-right'))
 
 const isHandlingClick = ref(false)
 const isBusy = computed(() => isHandlingClick.value || props.busy === true)

package/lib/components/menu/MenuTrigger.vue

@@ -1,20 +1,20 @@
 <!-- v1.0 -->
 <template>
   <div :class="{ active, disabled }" class="menu-trigger">
-    <VtsIcon :busy :icon accent="current" />
+    <VtsIcon :name="icon" size="medium" :busy />
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 
 defineProps<{
   active?: boolean
   busy?: boolean
   disabled?: boolean
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 </script>
 

package/lib/components/object-icon/VtsObjectIcon.vue

@@ -1,9 +1,9 @@
 <template>
-  <NewVtsIcon :name="iconName" :size />
+  <VtsIcon :name="iconName" :size />
 </template>
 
 <script generic="TType extends ObjectIconType" lang="ts" setup>
-import NewVtsIcon, { type IconSize } from '@core/components/icon/NewVtsIcon.vue'
+import VtsIcon, { type IconSize } from '@core/components/icon/VtsIcon.vue'
 import type { ObjectIconName } from '@core/icons'
 import { computed } from 'vue'
 

package/lib/components/progress-bar/VtsProgressBar.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="vts-progress-bar">
+    <UiDataRuler :max="percentageCap" :warning="threshold.payload" />
+    <UiProgressBar :accent="threshold.payload.accent ?? 'info'" :fill-width :legend />
+  </div>
+</template>
+
+<script generic="TSource" lang="ts" setup>
+import UiDataRuler from '@core/components/ui/data-ruler/UiDataRuler.vue'
+import UiProgressBar, { type ProgressBarAccent } from '@core/components/ui/progress-bar/UiProgressBar.vue'
+import { useProgress } from '@core/packages/progress/use-progress.ts'
+import type { ThresholdConfig } from '@core/packages/threshold/type.ts'
+import { useThreshold } from '@core/packages/threshold/use-threshold.ts'
+import { defaultProgressThresholds, useProgressToLegend } from '@core/utils/progress.util.ts'
+
+export type ProgressBarLegendType = 'percent' | 'bytes' | 'bytes-with-total' | 'value' | 'value-with-total'
+
+export type ProgressBarThresholdPayload = { accent?: ProgressBarAccent; tooltip?: string }
+
+export type ProgressBarThresholdConfig = ThresholdConfig<ProgressBarThresholdPayload>
+
+const {
+  current,
+  total,
+  label,
+  thresholds = defaultProgressThresholds(),
+  legendType,
+} = defineProps<{
+  current: number
+  total: number
+  label: string
+  legendType?: ProgressBarLegendType
+  thresholds?: ProgressBarThresholdConfig
+}>()
+
+const progress = useProgress(
+  () => current,
+  () => total
+)
+
+const { percentageCap, percentage, fillWidth } = progress
+
+const legend = useProgressToLegend(() => legendType, label, progress)
+
+const threshold = useThreshold(percentage, () => thresholds)
+</script>
+
+<style lang="postcss" scoped>
+.vts-progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+</style>

package/lib/components/progress-bar-group/VtsProgressBarGroup.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="vts-progress-bar-group">
+    <UiDataRuler :max="highestPercentageCap" :warning="threshold.payload" />
+    <UiProgressBar
+      v-for="item of progressItems"
+      :key="item.source.id"
+      :accent="item.threshold.payload?.accent ?? 'info'"
+      :fill-width="item.fillWidth"
+      :legend="toLegend(item.source.label, item)"
+    />
+  </div>
+</template>
+
+<script generic="TSource" lang="ts" setup>
+import type {
+  ProgressBarLegendType,
+  ProgressBarThresholdConfig,
+} from '@core/components/progress-bar/VtsProgressBar.vue'
+import UiDataRuler from '@core/components/ui/data-ruler/UiDataRuler.vue'
+import UiProgressBar from '@core/components/ui/progress-bar/UiProgressBar.vue'
+import { useProgressGroup } from '@core/packages/progress/use-progress-group.ts'
+import { useThreshold } from '@core/packages/threshold/use-threshold.ts'
+import { defaultProgressThresholds, useProgressToLegend } from '@core/utils/progress.util.ts'
+import { computed } from 'vue'
+
+export type ProgressBarGroupItem = { id: string; current: number; total: number; label: string }
+
+const {
+  items,
+  thresholds = defaultProgressThresholds(),
+  sort = 'desc',
+  legendType,
+  nItems,
+} = defineProps<{
+  items: ProgressBarGroupItem[]
+  legendType?: ProgressBarLegendType
+  thresholds?: ProgressBarThresholdConfig
+  sort?: 'asc' | 'desc' | 'none'
+  nItems?: number
+}>()
+
+const {
+  highestPercentageCap,
+  progressItems: rawProgressItems,
+  highestPercentage,
+} = useProgressGroup(() => items, {
+  sort: () => (sort === 'none' ? undefined : sort),
+})
+
+const progressItems = computed(() => {
+  const items = rawProgressItems.value.map(item => {
+    return {
+      ...item,
+      threshold: useThreshold(item.percentage, thresholds).value,
+    }
+  })
+
+  if (nItems) {
+    return items.slice(0, nItems)
+  }
+
+  return items
+})
+
+const toLegend = useProgressToLegend(() => legendType)
+
+const threshold = useThreshold(highestPercentage, () => thresholds)
+</script>
+
+<style lang="postcss" scoped>
+.vts-progress-bar-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+</style>

package/lib/components/resources/VtsResource.vue

@@ -1,6 +1,6 @@
 <template>
   <li class="vts-resource">
-    <VtsIcon accent="brand" :icon class="icon" />
+    <VtsIcon :name="icon" size="medium" class="icon" />
     <div class="separator" />
     <div class="label typo-h6">{{ label }}</div>
     <div class="count typo-body-regular-small">{{ count }}</div>
@@ -9,10 +9,10 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 
 defineProps<{
-  icon: IconDefinition
+  icon: IconName
   label: string
   count: string | number
 }>()

package/lib/components/select/VtsSelect.vue

@@ -8,7 +8,7 @@
       :model-value="selectedLabel"
       :placeholder
       :required="isRequired"
-      :right-icon="faAngleDown"
+      right-icon="fa:angle-down"
       readonly
     />
 
@@ -22,7 +22,7 @@
               ref="searchRef"
               v-model="searchTerm"
               :placeholder="searchPlaceholder"
-              :right-icon="faMagnifyingGlass"
+              right-icon="fa:magnifying-glass"
               accent="brand"
             />
           </div>
@@ -46,6 +46,7 @@ import VtsOption from '@core/components/select/VtsOption.vue'
 import UiDropdown from '@core/components/ui/dropdown/UiDropdown.vue'
 import UiDropdownList from '@core/components/ui/dropdown/UiDropdownList.vue'
 import UiInput from '@core/components/ui/input/UiInput.vue'
+import type { IconName } from '@core/icons'
 import {
   type FormSelect,
   type FormSelectId,
@@ -53,8 +54,6 @@ import {
   useFormSelectController,
 } from '@core/packages/form-select'
 import { toVariants } from '@core/utils/to-variants.util.ts'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faAngleDown, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 import { useCurrentElement, useElementSize } from '@vueuse/core'
 import { computed, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -62,7 +61,7 @@ import { useI18n } from 'vue-i18n'
 const { accent, id } = defineProps<{
   accent: 'brand' | 'warning' | 'danger'
   id: TSelectId
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 
 defineSlots<{

package/lib/components/table/ColumnTitle.vue

@@ -9,10 +9,10 @@
       >
         <div class="content">
           <span class="label">
-            <VtsIcon :icon accent="current" />
+            <VtsIcon :name="icon" size="medium" />
             <slot />
           </span>
-          <VtsIcon :icon="currentInteraction?.icon" accent="current" />
+          <VtsIcon :name="currentInteraction?.icon" size="medium" />
         </div>
       </th>
     </template>
@@ -23,7 +23,7 @@
       :disabled="interaction.disabled"
       :on-click="() => updateInteraction(interaction)"
     >
-      <VtsIcon :icon="interaction.icon" accent="current" />
+      <VtsIcon :name="interaction.icon" size="medium" />
       {{ interaction.label }}
       <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo-body-regular-small">
         {{ t('core.current').toLowerCase() }}
@@ -37,8 +37,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faArrowDown, faArrowUp, faEyeSlash, faFilter, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
+import type { IconName } from '@core/icons'
 import { noop } from '@vueuse/core'
 import { computed, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -48,14 +47,14 @@ type InteractionId = 'sort-asc' | 'sort-desc' | 'group' | 'filter' | 'hide'
 type Interaction = {
   disabled?: boolean
   id: InteractionId
-  icon: IconDefinition
+  icon: IconName
   label: string
 }
 
 const props = withDefaults(
   defineProps<{
     id?: string
-    icon?: IconDefinition
+    icon?: IconName
     interactive?: boolean
     disabled?: boolean
   }>(),
@@ -68,11 +67,11 @@ const { t } = useI18n()
 const router = useRouter()
 
 const interactions = computed<Interaction[]>(() => [
-  { id: 'sort-asc', icon: faArrowDown, label: t('core.sort.ascending'), disabled: true },
-  { id: 'sort-desc', icon: faArrowUp, label: t('core.sort.descending'), disabled: true },
-  { id: 'group', icon: faLayerGroup, label: t('core.group'), disabled: true },
-  { id: 'filter', icon: faFilter, label: t('core.filter'), disabled: true },
-  { id: 'hide', icon: faEyeSlash, label: t('core.hide'), disabled: true },
+  { id: 'sort-asc', icon: 'fa:arrow-down', label: t('core.sort.ascending'), disabled: true },
+  { id: 'sort-desc', icon: 'fa:arrow-up', label: t('core.sort.descending'), disabled: true },
+  { id: 'group', icon: 'fa:layer-group', label: t('core.group'), disabled: true },
+  { id: 'filter', icon: 'fa:filter', label: t('core.filter'), disabled: true },
+  { id: 'hide', icon: 'fa:eye-slash', label: t('core.hide'), disabled: true },
 ])
 
 const tableName = inject<string>('tableName')

package/lib/components/task/VtsQuickTaskButton.vue

@@ -4,7 +4,7 @@
     v-tooltip="{ content: t('tasks.quick-view'), placement: 'bottom-end' }"
     accent="brand"
     :dot="hasNewTask"
-    :icon="faBarsProgress"
+    icon="fa:bars-progress"
     size="large"
     @click="isPanelOpen = true"
   />
@@ -20,7 +20,6 @@ import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 import UiQuickTaskPanel from '@core/components/ui/quick-task-panel/UiQuickTaskPanel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { faBarsProgress } from '@fortawesome/free-solid-svg-icons'
 import { unrefElement, watchArray, whenever } from '@vueuse/core'
 import placementJs from 'placement.js'
 import { computed, nextTick, ref } from 'vue'

package/lib/components/tree/VtsTreeLoadingItem.vue

@@ -5,7 +5,7 @@
         <template v-if="depth > 1">
           <VtsTreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" full-height />
         </template>
-        <VtsIcon :icon accent="current" />
+        <VtsIcon :name="icon" size="medium" />
         <div class="loader">&nbsp;</div>
       </div>
     </div>
@@ -15,12 +15,12 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
+import type { IconName } from '@core/icons'
 import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { inject } from 'vue'
 
 defineProps<{
-  icon: IconDefinition
+  icon: IconName
 }>()
 
 const depth = inject(IK_TREE_LIST_DEPTH, 0)