@xen-orchestra/web-core 0.26.1 → 0.28.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/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)

package/lib/components/ui/alarm-item/UiAlarmItem.vue

@@ -5,7 +5,7 @@
       <div class="label-percent typo-body-regular text-ellipsis">
         <UiButtonIcon
           v-if="description"
-          :icon="isDescriptionVisible ? faAngleDown : faAngleRight"
+          :icon="isDescriptionVisible ? 'fa:angle-down' : 'fa:angle-right'"
           size="small"
           accent="brand"
           :target-scale="2"
@@ -38,7 +38,6 @@ import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { useTimeAgo } from '@core/composables/locale-time-ago.composable.ts'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { toVariants } from '@core/utils/to-variants.util'
-import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

package/lib/components/ui/alert/UiAlert.vue

@@ -2,7 +2,7 @@
 <template>
   <div :class="toVariants({ accent })" class="ui-alert">
     <div class="content">
-      <VtsIcon class="information-icon" :accent :icon="faCircle" :overlay-icon="icon" />
+      <VtsIcon class="information-icon" :name="icon" size="current" />
       <div class="alert typo-body-regular-small">
         <div>
           <slot />
@@ -14,7 +14,7 @@
       <UiButtonIcon
         v-if="close"
         class="close-button"
-        :icon="faXmark"
+        icon="fa:xmark"
         accent="brand"
         size="medium"
         @click="emit('close')"
@@ -26,10 +26,9 @@
 <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 AlertAccent = 'info' | 'success' | 'warning' | 'danger'
 
@@ -47,14 +46,16 @@ const slots = defineSlots<{
   description?(): any
 }>()
 
-const iconByAccent: Record<AlertAccent, IconDefinition> = {
-  info: faInfo,
-  success: faCheck,
-  warning: faExclamation,
-  danger: faXmark,
-}
-
-const icon = computed(() => iconByAccent[accent])
+const icon = useMapper<AlertAccent, 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/button/UiButton.vue

@@ -1,18 +1,17 @@
 <!-- v6 -->
 <template>
   <button :class="classNames" :disabled="busy || isDisabled || lockIcon" class="ui-button" type="button">
-    <VtsIcon :busy :icon="leftIcon" accent="current" class="icon" fixed-width />
+    <VtsIcon :busy :name="leftIcon" class="icon" size="current" />
     <slot />
-    <VtsIcon v-if="lockIcon" :icon="faLock" accent="current" class="icon" fixed-width />
+    <VtsIcon v-if="lockIcon" name="fa:lock" size="medium" class="icon" />
   </button>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { useDisabled } from '@core/composables/disabled.composable'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faLock } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
@@ -26,7 +25,7 @@ const { accent, variant, size, disabled, busy, lockIcon } = defineProps<{
   busy?: boolean
   disabled?: boolean
   lockIcon?: boolean
-  leftIcon?: IconDefinition
+  leftIcon?: IconName
 }>()
 
 defineSlots<{

package/lib/components/ui/button-icon/UiButtonIcon.vue

@@ -2,15 +2,15 @@
 <!-- TODO: Add complex icon -->
 <template>
   <button :class="classNames" :disabled class="ui-button-icon" type="button">
-    <VtsIcon :icon accent="current" />
+    <VtsIcon :name="icon" size="medium" />
     <span v-if="dot" class="dot" />
   </button>
 </template>
 
 <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'
 import { computed } from 'vue'
 
 type ButtonIconAccent = 'brand' | 'warning' | 'danger'
@@ -23,7 +23,7 @@ const {
   selected,
   targetScale = 1,
 } = defineProps<{
-  icon: IconDefinition
+  icon: IconName
   size: ButtonSize
   accent: ButtonIconAccent
   disabled?: boolean