@xen-orchestra/web-core 0.27.0 → 0.29.0

package/lib/components/ui/legend/UiLegend.vue

@@ -1,9 +1,9 @@
 <!-- v3 -->
 <template>
   <li :class="classNames" class="ui-legend">
-    <VtsIcon :icon="faCircle" accent="current" class="circle-icon" />
+    <VtsIcon name="fa:circle" size="medium" class="circle-icon" />
     <span class="label typo-body-regular-small"><slot /></span>
-    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="info" />
+    <VtsIcon v-if="tooltip" v-tooltip="tooltip" name="fa:info-circle" size="medium" class="tooltip-icon" />
     <span v-if="valueLabel" class="value-and-unit typo-caption-small">{{ valueLabel }}</span>
   </li>
 </template>
@@ -12,7 +12,6 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { toVariants } from '@core/utils/to-variants.util'
-import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 export type LegendItemAccent = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
@@ -47,6 +46,7 @@ const classNames = computed(() => toVariants({ accent }))
 
   .tooltip-icon {
     font-size: 1.2rem;
+    color: var(--color-info-item-base);
   }
 
   .label {

package/lib/components/ui/legend-title/UiLegendTitle.vue

@@ -2,18 +2,18 @@
 <template>
   <div class="ui-legend-title typo-caption-small">
     <slot />
-    <VtsIcon v-tooltip="iconTooltip ?? false" :icon accent="info" />
+    <VtsIcon v-tooltip="iconTooltip ?? false" class="icon" :name="icon" size="medium" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 
 export type LegendTitleProps = {
   iconTooltip?: string
-  icon?: IconDefinition
+  icon?: IconName
 }
 
 defineProps<LegendTitleProps>()
@@ -29,5 +29,9 @@ defineSlots<{
   display: flex;
   gap: 0.8rem;
   align-items: center;
+
+  .icon {
+    color: var(--color-info-item-base);
+  }
 }
 </style>

package/lib/components/ui/link/UiLink.vue

@@ -1,23 +1,22 @@
 <!-- v3 -->
 <template>
   <component :is="component" :class="classes" class="ui-link" v-bind="attributes">
-    <VtsIcon :icon accent="current" />
+    <VtsIcon :name="icon" size="medium" />
     <slot />
-    <VtsIcon v-if="attributes.target === '_blank'" :icon="faUpRightFromSquare" accent="current" class="external-icon" />
+    <VtsIcon v-if="attributes.target === '_blank'" name="fa:up-right-from-square" size="medium" class="external-icon" />
   </component>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { type LinkOptions, useLinkComponent } from '@core/composables/link-component.composable'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import type { IconName } from '@core/icons'
 import { computed } from 'vue'
 
 const props = defineProps<
   LinkOptions & {
     size: 'small' | 'medium'
-    icon?: IconDefinition
+    icon?: IconName
   }
 >()
 

package/lib/components/ui/log-entry-viewer/UiLogEntryViewer.vue

@@ -7,7 +7,12 @@
       </div>
       <div class="actions">
         <VtsCopyButton :value="content" />
-        <UiButtonIcon :icon="faArrowUpRightFromSquare" size="medium" accent="brand" @click="openRawValueInNewTab()" />
+        <UiButtonIcon
+          icon="fa:arrow-up-right-from-square"
+          size="medium"
+          accent="brand"
+          @click="openRawValueInNewTab()"
+        />
       </div>
     </div>
     <code :class="fontClasses.codeClass" class="code-container">
@@ -21,7 +26,6 @@ import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { useMapper } from '@core/packages/mapper'
 import { toVariants } from '@core/utils/to-variants.util.ts'
-import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { computed, watch } from 'vue'
 
 type LogEntryViewerAccent = 'info' | 'warning' | 'danger'

package/lib/components/ui/object-link/UiObjectLink.vue

@@ -3,7 +3,7 @@
   <RouterLink v-if="route && !disabled" :to="route" class="ui-object-link is-link typo-action-link-small">
     <span class="icon">
       <slot name="icon">
-        <VtsIcon :icon accent="current" />
+        <VtsIcon :name="icon" size="medium" />
       </slot>
     </span>
     <span v-tooltip class="content text-ellipsis">
@@ -13,7 +13,7 @@
   <span v-else :class="{ disabled }" class="ui-object-link typo-action-link-small">
     <span class="icon">
       <slot name="icon">
-        <VtsIcon :icon accent="current" />
+        <VtsIcon :name="icon" size="medium" />
       </slot>
     </span>
     <slot />
@@ -23,13 +23,13 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 import { type RouteLocationRaw } from 'vue-router'
 
 defineProps<{
   route?: RouteLocationRaw
   disabled?: boolean
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 
 defineSlots<{

package/lib/components/ui/progress-bar/UiProgressBar.vue

@@ -1,19 +1,12 @@
 <!-- v2 -->
 <template>
-  <div class="ui-progress-bar" :class="className">
+  <div :class="className" class="ui-progress-bar">
     <div class="progress-bar">
-      <div class="fill" :style="{ width: `${fillWidth}%` }" />
+      <div :style="{ width: fillWidth }" class="fill" />
     </div>
-    <div v-if="shouldShowSteps" class="steps typo-body-regular-small">
-      <span>{{ n(0, 'percent') }}</span>
-      <span v-for="step in steps" :key="step">{{ n(step, 'percent') }}</span>
-    </div>
-    <VtsLegendList class="legend">
-      <UiLegend v-if="displayMode === 'percent'" :accent :value="Math.round(percentage)" unit="%">
-        {{ legend }}
-      </UiLegend>
-      <UiLegend v-else :accent :value="legendValue">
-        {{ legend }}
+    <VtsLegendList v-if="legend" class="legend">
+      <UiLegend :accent :value="legend.value">
+        {{ legend.label }}
       </UiLegend>
     </VtsLegendList>
   </div>
@@ -22,61 +15,20 @@
 <script lang="ts" setup>
 import VtsLegendList from '@core/components/legend-list/VtsLegendList.vue'
 import UiLegend from '@core/components/ui/legend/UiLegend.vue'
-import { formatSizeRaw } from '@core/utils/size.util.ts'
 import { toVariants } from '@core/utils/to-variants.util'
-import { useClamp, useMax } from '@vueuse/math'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-interface Props {
-  legend: string
-  value: number
-  showSteps?: boolean
-}
-interface PercentageProps {
-  max?: number
-  displayMode: 'percent'
-}
-interface ValueProps {
-  max: number
-  displayMode: 'value'
-}
-
-const { value: _value, max: _max, showSteps, displayMode } = defineProps<Props & (PercentageProps | ValueProps)>()
-
-const { n } = useI18n()
 
-const value = useMax(0, () => _value)
+export type ProgressBarAccent = 'info' | 'warning' | 'danger'
 
-const max = computed(() => _max ?? 100)
+export type ProgressBarLegend = { label: string; value?: string | number }
 
-const percentage = computed(() => (max.value <= 0 ? 0 : (value.value / max.value) * 100))
-const maxPercentage = computed(() => Math.ceil(percentage.value / 100) * 100)
-const fillWidth = useClamp(() => (percentage.value / maxPercentage.value) * 100 || 0, 0, 100)
-const shouldShowSteps = computed(() => showSteps || percentage.value > 100)
-const steps = useMax(1, () => Math.floor(maxPercentage.value / 100))
-
-const accent = computed(() => {
-  if (percentage.value >= 90) {
-    return 'danger'
-  }
+const { accent, legend } = defineProps<{
+  accent: ProgressBarAccent
+  fillWidth: string
+  legend?: ProgressBarLegend
+}>()
 
-  if (percentage.value >= 80) {
-    return 'warning'
-  }
-
-  return 'info'
-})
-
-const className = computed(() => toVariants({ accent: accent.value }))
-
-const formattedValue = computed(() => formatSizeRaw(value.value, 1))
-
-const formattedMax = computed(() => formatSizeRaw(max.value, 0))
-
-const legendValue = computed(() => {
-  return `${formattedValue.value.value} ${formattedValue.value.prefix} / ${formattedMax.value.value} ${formattedMax.value.prefix}`
-})
+const className = computed(() => toVariants({ accent }))
 </script>
 
 <style lang="postcss" scoped>
@@ -87,30 +39,22 @@ const legendValue = computed(() => {
 
   .progress-bar {
     width: 100%;
-    height: 1.2rem;
     border-radius: 0.4rem;
     overflow: hidden;
     background-color: var(--color-neutral-background-disabled);
 
     .fill {
       width: 0;
-      height: 100%;
+      height: 1.2rem;
       transition: width 0.25s ease-in-out;
     }
   }
 
-  .steps {
-    color: var(--color-neutral-txt-secondary);
-    display: flex;
-    justify-content: space-between;
-  }
-
   .legend {
     margin-inline-start: auto;
   }
 
   /* ACCENT */
-
   &.accent--info {
     .fill {
       background-color: var(--color-info-item-base);

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -10,7 +10,7 @@
       type="text"
       accent="brand"
       :aria-label="uiStore.isMobile ? t('core.query-search-bar.label') : undefined"
-      :icon="!uiStore.isMobile ? faMagnifyingGlass : undefined"
+      :icon="!uiStore.isMobile ? 'fa:magnifying-glass' : undefined"
       :placeholder="t('core.query-search-bar.placeholder')"
     />
     <template v-if="!uiStore.isMobile">
@@ -32,8 +32,8 @@
 
     <!-- Mobile icons: search + filter -->
     <template v-else>
-      <UiButtonIcon accent="brand" size="medium" type="submit" :icon="faMagnifyingGlass" class="action-button" />
-      <UiButtonIcon accent="brand" size="medium" disabled :icon="faFilter" class="action-button" />
+      <UiButtonIcon accent="brand" size="medium" type="submit" icon="fa:magnifying-glass" class="action-button" />
+      <UiButtonIcon accent="brand" size="medium" disabled icon="fa:filter" class="action-button" />
     </template>
   </form>
 </template>
@@ -46,7 +46,6 @@ import UiInput from '@core/components/ui/input/UiInput.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useUiStore } from '@core/stores/ui.store'
 import { uniqueId } from '@core/utils/unique-id.util'
-import { faFilter, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/ui/quick-task-item/UiQuickTaskItem.vue

@@ -2,7 +2,7 @@
 <template>
   <li class="ui-quick-task-item">
     <div v-if="hasSubTasks" class="toggle" @click="toggleExpand()">
-      <UiButtonIcon accent="brand" :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
+      <UiButtonIcon accent="brand" :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'" size="small" />
     </div>
     <div class="content">
       <div class="typo-body-bold">
@@ -12,14 +12,14 @@
         <div class="line-1">
           <UiTag v-if="task.tag" accent="neutral" variant="primary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
-            <VtsIcon :icon="faCircleNotch" accent="current" />
+            <VtsIcon name="fa:circle-notch" size="medium" />
             <span class="typo-body-regular-small">{{ t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
           </div>
         </div>
         <div v-if="task.start" class="line-2 typo-body-regular-small">
           {{ d(task.start, 'datetime_short') }}
           <template v-if="task.end">
-            <VtsIcon :icon="faArrowRight" accent="current" />
+            <VtsIcon name="fa:arrow-right" size="medium" />
             {{ d(new Date(task.end), 'datetime_short') }}
           </template>
         </div>
@@ -34,7 +34,6 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiTag from '@core/components/ui/tag/UiTag.vue'
-import { faAngleDown, faAngleRight, faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

package/lib/components/ui/radio-button/UiRadioButton.vue

@@ -3,7 +3,7 @@
   <label :class="variant" class="ui-radio-button typo-body-regular">
     <span class="radio-container">
       <input v-model="model" :disabled="isDisabled" :value class="input" type="radio" />
-      <VtsIcon :icon="faCircle" accent="current" class="radio-icon" />
+      <VtsIcon name="fa:circle" size="medium" class="radio-icon" />
     </span>
     <slot />
   </label>
@@ -13,7 +13,6 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
-import { faCircle } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 const { accent, value, disabled } = defineProps<{

package/lib/components/ui/table-pagination/PaginationButton.vue

@@ -4,33 +4,10 @@
 
 <script setup lang="ts">
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 
 defineProps<{
   disabled: boolean
-  icon: IconDefinition
+  icon: IconName
 }>()
 </script>
-
-<style scoped lang="postcss">
-.pagination-button.accent--brand {
-  border: 0.1rem solid var(--color-neutral-border);
-  font-size: 1rem;
-  /* Override UiButtonIcon size to match DS */
-  width: 3rem;
-  height: 3rem;
-
-  &:hover {
-    border-color: var(--color-brand-item-hover);
-  }
-
-  &:active {
-    border-color: var(--color-brand-item-active);
-  }
-
-  &:disabled {
-    background-color: var(--color-neutral-background-disabled);
-    border-color: transparent;
-  }
-}
-</style>

package/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -1,17 +1,21 @@
-<!-- v3 -->
+<!-- v5 -->
 <template>
-  <div class="ui-table-pagination">
-    <div class="buttons-container">
-      <PaginationButton :disabled="isFirstPage" :icon="faAngleDoubleLeft" @click="emit('first')" />
-      <PaginationButton :disabled="isFirstPage" :icon="faAngleLeft" @click="emit('previous')" />
-      <PaginationButton :disabled="isLastPage" :icon="faAngleRight" @click="emit('next')" />
-      <PaginationButton :disabled="isLastPage" :icon="faAngleDoubleRight" @click="emit('last')" />
+  <div class="ui-table-pagination" :class="className">
+    <div class="container">
+      <span class="typo-body-regular-small label">
+        {{ t('core.select.n-object-of', { from, to, total }) }}
+      </span>
+      <div class="buttons-container">
+        <PaginationButton :disabled="isFirstPage" icon="fa:angle-double-left" @click="emit('first')" />
+        <PaginationButton :disabled="isFirstPage" icon="fa:angle-left" @click="emit('previous')" />
+        <PaginationButton :disabled="isLastPage" icon="fa:angle-right" @click="emit('next')" />
+        <PaginationButton :disabled="isLastPage" icon="fa:angle-double-right" @click="emit('last')" />
+      </div>
+    </div>
+    <div class="container">
+      <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
+      <VtsSelect :id="showBySelectId" accent="brand" class="typo-body-regular-small show-by-select" />
     </div>
-    <span class="typo-body-regular-small label">
-      {{ t('core.select.n-object-of', { from, to, total }) }}
-    </span>
-    <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
-    <VtsSelect :id="showBySelectId" accent="brand" class="typo-body-regular-small show-by-select" />
   </div>
 </template>
 
@@ -19,15 +23,19 @@
 import VtsSelect from '@core/components/select/VtsSelect.vue'
 import PaginationButton from '@core/components/ui/table-pagination/PaginationButton.vue'
 import { useFormSelect } from '@core/packages/form-select'
-import { faAngleDoubleLeft, faAngleDoubleRight, faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-defineProps<{
+export type TablePaginationSize = 'small' | 'medium'
+
+const { size } = defineProps<{
   from: number
   to: number
   total: number
   isFirstPage: boolean
   isLastPage: boolean
+  size: TablePaginationSize
 }>()
 
 const emit = defineEmits<{
@@ -39,6 +47,8 @@ const emit = defineEmits<{
 
 const showBy = defineModel<number>('showBy', { default: 24 })
 
+const className = computed(() => toVariants({ size }))
+
 const { t } = useI18n()
 
 const { id: showBySelectId } = useFormSelect([12, 24, 48, -1], {
@@ -55,6 +65,21 @@ const { id: showBySelectId } = useFormSelect([12, 24, 48, -1], {
   align-items: center;
   gap: 0.8rem;
 
+  &.size--small {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  &.size--medium {
+    flex-direction: row;
+  }
+
+  .container {
+    display: flex;
+    gap: 0.8rem;
+    align-items: center;
+  }
+
   .buttons-container {
     display: flex;
     gap: 0.2rem;
@@ -64,19 +89,15 @@ const { id: showBySelectId } = useFormSelect([12, 24, 48, -1], {
     color: var(--color-neutral-txt-secondary);
   }
 
-  .show::before {
-    content: '-';
-    margin-right: 0.8rem;
-  }
-
   /* Workaround: we don't have "small" select yet */
   .show-by-select {
-    width: 7rem;
+    width: 6rem;
 
     &:deep(.ui-input) {
       height: 3rem;
       padding-inline: 0.8rem;
       gap: 0.8rem;
+      min-width: 6rem;
     }
 
     &:deep(.input) {

package/lib/components/ui/tag/UiTag.vue

@@ -3,7 +3,7 @@
 <template>
   <span :class="toVariants({ accent, variant })" class="ui-tag typo-body-regular-small">
     <slot name="icon">
-      <VtsIcon :icon accent="current" fixed-width />
+      <VtsIcon :name="icon" size="medium" />
     </slot>
     <span class="text-ellipsis"><slot /></span>
   </span>
@@ -11,8 +11,8 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 type TagAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
 type TagVariant = 'primary' | 'secondary'
@@ -20,7 +20,7 @@ type TagVariant = 'primary' | 'secondary'
 defineProps<{
   accent: TagAccent
   variant: TagVariant
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 
 defineSlots<{

package/lib/components/ui/text-area/UiTextarea.vue

@@ -19,8 +19,8 @@
 import UiCharacterLimit from '@core/components/ui/character-limit/UiCharacterLimit.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { useFocus } from '@vueuse/core'
 import { computed, useAttrs, useId, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -39,7 +39,7 @@ const {
   maxCharacters?: number
   disabled?: boolean
   href?: string
-  icon?: IconDefinition
+  icon?: IconName
   required?: boolean
 }>()
 

package/lib/components/ui/toaster/UiToaster.vue

@@ -2,7 +2,7 @@
 <template>
   <div :class="toVariants({ accent })" class="ui-toaster">
     <div class="content">
-      <VtsIcon class="information-icon" :accent :icon="faCircle" :overlay-icon="icon" />
+      <VtsIcon class="information-icon" :name="icon" size="medium" />
       <div>
         <div class="typo-h5">
           <slot />
@@ -11,7 +11,7 @@
           <slot name="description" />
         </div>
       </div>
-      <UiButtonIcon class="close-icon" :icon="faXmark" accent="brand" size="medium" @click="emit('close')" />
+      <UiButtonIcon class="close-icon" icon="fa:xmark" accent="brand" size="medium" @click="emit('close')" />
     </div>
     <div v-if="slots.actions" class="actions">
       <slot name="actions" />
@@ -22,14 +22,13 @@
 <script setup lang="ts">
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { IconName } from '@core/icons'
+import { useMapper } from '@core/packages/mapper'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faCheck, faCircle, faExclamation, faInfo, faXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
 
 type ToasterAccent = 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<{
+const { accent } = defineProps<{
   accent: ToasterAccent
 }>()
 
@@ -43,13 +42,16 @@ const slots = defineSlots<{
   actions?(): any
 }>()
 
-const states: Record<ToasterAccent, IconDefinition> = {
-  info: faInfo,
-  success: faCheck,
-  warning: faExclamation,
-  danger: faXmark,
-}
-const icon = computed(() => states[props.accent])
+const icon = useMapper<ToasterAccent, IconName>(
+  () => accent,
+  {
+    info: 'legacy:status:info',
+    success: 'legacy:status:success',
+    warning: 'legacy:status:warning',
+    danger: 'legacy:status:danger',
+  },
+  'info'
+)
 </script>
 
 <style scoped lang="postcss">

package/lib/components/ui/tree-item-label/UiTreeItemLabel.vue

@@ -19,7 +19,7 @@
         v-tooltip="isExpanded ? t('core.close') : t('core.open')"
         class="toggle"
         accent="brand"
-        :icon="isExpanded ? faAngleDown : faAngleRight"
+        :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'"
         size="small"
         :target-scale="{ x: 1.5, y: 2 }"
         @click="emit('toggle')"
@@ -27,7 +27,7 @@
       <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo-body-bold-small" @click="navigate">
         <slot name="icon">
-          <VtsIcon :icon accent="current" class="icon" />
+          <VtsIcon :name="icon" size="medium" class="icon" />
         </slot>
         <div class="text text-ellipsis">
           <slot />
@@ -43,9 +43,8 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconName } from '@core/icons'
 import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
@@ -56,7 +55,7 @@ defineOptions({
 
 defineProps<{
   route: RouteLocationRaw
-  icon?: IconDefinition
+  icon?: IconName
   active?: boolean
 }>()