@xen-orchestra/web-core 0.27.0 → 0.29.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

package/lib/components/ui/checkbox/UiCheckbox.vue

@@ -10,7 +10,7 @@
       v-bind="attrs"
     />
     <span class="fake-checkbox">
-      <VtsIcon :icon accent="current" class="icon" />
+      <VtsIcon :name="icon" size="medium" class="icon" />
     </span>
     <span v-if="slots.default" class="typo-body-regular">
       <slot />
@@ -26,7 +26,6 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
-import { faCheck, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
 
 type CheckboxAccent = 'brand' | 'warning' | 'danger'
@@ -57,13 +56,7 @@ const classNames = computed(() => [
 
 const isIndeterminate = computed(() => checkboxModel.value === undefined)
 
-const icon = computed(() => {
-  if (isIndeterminate.value) {
-    return faMinus
-  }
-
-  return faCheck
-})
+const icon = computed(() => (isIndeterminate.value ? 'fa:minus' : 'fa:check'))
 
 const attrs = useAttrs()
 </script>

package/lib/components/ui/chip/ChipIcon.vue

@@ -1,13 +1,13 @@
 <template>
-  <VtsIcon :class="{ muted: disabled }" accent="current" :icon class="chip-icon" fixed-width />
+  <VtsIcon :class="{ muted: disabled }" :name="icon" size="medium" class="chip-icon" />
 </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<{
-  icon?: IconDefinition
+  icon?: IconName
   disabled?: boolean
 }>()
 </script>

package/lib/components/ui/chip/ChipRemoveIcon.vue

@@ -1,11 +1,10 @@
 <template>
-  <UiButtonIcon :accent="buttonAccent" :icon="faXmark" size="small" />
+  <UiButtonIcon :accent="buttonAccent" icon="fa:xmark" size="small" />
 </template>
 
 <script lang="ts" setup>
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { ChipAccent } from '@core/components/ui/chip/UiChip.vue'
-import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 const { accent } = defineProps<{

package/lib/components/ui/chip/UiChip.vue

@@ -12,15 +12,15 @@
 <script lang="ts" setup>
 import ChipIcon from '@core/components/ui/chip/ChipIcon.vue'
 import ChipRemoveIcon from '@core/components/ui/chip/ChipRemoveIcon.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'
 
 export type ChipAccent = 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   accent: ChipAccent
-  icon?: IconDefinition
+  icon?: IconName
   disabled?: boolean
 }>()
 

package/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

@@ -18,7 +18,7 @@
       />
     </svg>
     <div v-if="size !== 'extra-small'" class="overlay">
-      <VtsIcon v-if="isComplete" class="icon" :icon :accent="iconAccent" />
+      <VtsIcon v-if="isComplete" class="icon" :name="icon" size="medium" />
       <span v-else>{{ percentValue }}</span>
     </div>
   </div>
@@ -26,8 +26,8 @@
 
 <script setup lang="ts">
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util.ts'
-import { faCheck, faExclamation } from '@fortawesome/free-solid-svg-icons'
 import { useClamp, useMax } from '@vueuse/math'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -90,8 +90,7 @@ const dashOffset = computed(() => {
 
 const percentValue = computed(() => n(valuePercent.value / 100, 'percent'))
 
-const iconAccent = computed(() => (isCompleteWithSuccess.value ? 'success' : accent))
-const icon = computed(() => (accent === 'warning' || accent === 'danger' ? faExclamation : faCheck))
+const icon = computed<IconName>(() => (accent === 'warning' || accent === 'danger' ? 'fa:exclamation' : 'fa:check'))
 
 const className = computed(() => [
   fontClass.value,
@@ -125,6 +124,10 @@ const className = computed(() => [
     .success {
       stroke: var(--color-success-item-base);
     }
+
+    .icon {
+      color: var(--color-success-item-base);
+    }
   }
 
   &.accent--warning {

package/lib/components/ui/data-ruler/UiDataRuler.vue

@@ -1,24 +1,72 @@
 <!-- v1 -->
 <template>
   <div class="ui-data-ruler typo-body-regular-small">
-    <span>{{ t('n-percent', 0) }}</span>
-    <span>{{ t('n-percent', 50) }}</span>
-    <span>{{ t('n-percent', 100) }}</span>
+    <span>{{ n(0, 'percent') }}</span>
+    <span>{{ n(max / 200, 'percent') }}</span>
+    <span class="max">
+      <VtsIcon
+        v-if="warning?.accent || warning?.tooltip"
+        v-tooltip="warning.tooltip ?? false"
+        :class="warning.accent ?? 'warning'"
+        class="icon"
+        name="fa:exclamation-circle"
+        size="small"
+      />
+      {{ n(max / 100, 'percent') }}</span
+    >
   </div>
 </template>
 
 <script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
+const { max = 100 } = defineProps<{
+  max?: number
+  warning?: {
+    accent?: 'info' | 'warning' | 'danger'
+    tooltip?: string
+  }
+}>()
+
+const { n } = useI18n()
 </script>
 
 <style lang="postcss" scoped>
 .ui-data-ruler {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
   gap: 1rem;
   color: var(--color-neutral-txt-secondary);
+
+  .icon {
+    &.warning {
+      color: var(--color-warning-item-base);
+    }
+
+    &.danger {
+      color: var(--color-danger-item-base);
+    }
+  }
+
+  .max {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+  }
+
+  & > span:first-child {
+    justify-self: start;
+  }
+
+  & > span:nth-child(2) {
+    justify-self: center;
+  }
+
+  & > span:last-child {
+    justify-self: end;
+  }
 }
 </style>

package/lib/components/ui/donut-chart/UiDonutChart.vue

@@ -1,25 +1,27 @@
 <!-- v3 -->
 <template>
-  <svg class="ui-donut-chart" viewBox="0 0 100 100">
-    <circle class="segment accent--muted" cx="50" cy="50" r="40" />
-    <circle
-      v-for="(segment, index) in computedSegments"
-      :key="index"
-      :class="`accent--${segment.accent}`"
-      :stroke-dasharray="`${segment.percent} ${circumference - segment.percent}`"
-      :stroke-dashoffset="segment.offset"
-      class="segment"
-      cx="50"
-      cy="50"
-      r="40"
-    />
-    <VtsIcon :icon accent="current" height="24" width="24" x="38" y="38" />
-  </svg>
+  <div class="ui-donut-chart">
+    <VtsIcon v-if="icon" :name="icon" size="medium" class="chart-icon" />
+    <svg viewBox="0 0 100 100">
+      <circle class="segment accent--muted" cx="50" cy="50" r="40" />
+      <circle
+        v-for="(segment, index) in computedSegments"
+        :key="index"
+        :class="`accent--${segment.accent}`"
+        :stroke-dasharray="`${segment.percent} ${circumference - segment.percent}`"
+        :stroke-dashoffset="segment.offset"
+        class="segment"
+        cx="50"
+        cy="50"
+        r="40"
+      />
+    </svg>
+  </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'
 import { computed } from 'vue'
 
 export type DonutSegmentAccent = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
@@ -31,7 +33,7 @@ export type DonutSegment = {
 
 export type DonutChartProps = {
   segments: DonutSegment[]
-  icon?: IconDefinition
+  icon?: IconName
 }
 
 const props = defineProps<DonutChartProps>()
@@ -59,9 +61,20 @@ const computedSegments = computed(() => {
 
 <style lang="postcss" scoped>
 .ui-donut-chart {
+  display: grid;
+  place-items: center;
   width: 100px;
   height: 100px;
 
+  .chart-icon {
+    grid-area: 1 / 1;
+    z-index: 1;
+  }
+
+  svg {
+    grid-area: 1 / 1;
+  }
+
   .segment {
     stroke-width: 10;
     fill: transparent;

package/lib/components/ui/dropdown/UiDropdown.vue

@@ -3,7 +3,7 @@
   <div v-tooltip="{ selector: '.text-ellipsis' }" :class="className" class="ui-dropdown">
     <UiCheckbox v-if="checkbox" :disabled :model-value="selected" accent="brand" />
     <slot name="icon">
-      <VtsIcon :icon accent="current" />
+      <VtsIcon :name="icon" size="medium" />
     </slot>
     <div class="text-ellipsis typo-body-bold-small">
       <slot />
@@ -11,10 +11,9 @@
     <div v-if="info" class="info typo-body-regular-small">{{ info }}</div>
     <VtsIcon
       v-if="subMenuIcon || locked"
-      :accent="disabled ? 'current' : 'brand'"
-      :icon="locked ? faLock : faAngleRight"
+      :name="locked ? 'fa:lock' : 'fa:angle-right'"
+      size="medium"
       class="right-icon"
-      fixed-width
     />
   </div>
 </template>
@@ -23,9 +22,8 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faAngleRight, faLock } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 export type DropdownAccent = 'normal' | 'brand' | 'success' | 'warning' | 'danger'
@@ -44,7 +42,7 @@ const {
   hover?: boolean
   checkbox?: boolean
   subMenuIcon?: boolean
-  icon?: IconDefinition
+  icon?: IconName
   info?: string
 }>()
 

package/lib/components/ui/dropdown-button/UiDropdownButton.vue

@@ -1,24 +1,23 @@
 <!-- v5 -->
 <template>
   <button :class="{ selected }" :disabled="isDisabled" class="ui-dropdown-item" type="button">
-    <VtsIcon :icon accent="current" class="left-icon" fixed-width />
+    <VtsIcon :name="icon" size="medium" />
     <span class="typo-action-button label">
       <slot />
     </span>
-    <VtsIcon :icon="faAngleDown" accent="current" class="right-icon" fixed-width />
+    <VtsIcon name="fa:angle-down" size="medium" />
   </button>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { useDisabled } from '@core/composables/disabled.composable'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
+import type { IconName } from '@core/icons'
 
 const { disabled, selected, icon } = defineProps<{
   disabled?: boolean
   selected?: boolean
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 
 const isDisabled = useDisabled(() => disabled)

package/lib/components/ui/head-bar/UiHeadBar.vue

@@ -2,11 +2,9 @@
 <template>
   <div class="ui-head-bar">
     <div class="label-wrapper">
-      <span v-if="slots.icon || icon" class="icon">
-        <slot name="icon">
-          <VtsIcon :icon accent="current" />
-        </slot>
-      </span>
+      <slot name="icon">
+        <VtsIcon :name="icon" size="medium" />
+      </slot>
       <h4 v-tooltip class="typo-h4 label text-ellipsis">
         <slot />
       </h4>
@@ -23,10 +21,10 @@
 <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'
 
 defineProps<{
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 
 const slots = defineSlots<{
@@ -39,6 +37,7 @@ const slots = defineSlots<{
 
 <style lang="postcss" scoped>
 .ui-head-bar {
+  min-height: 5.6rem;
   padding: 0.8rem 1.6rem;
   display: flex;
   gap: 1.6rem;
@@ -57,10 +56,6 @@ const slots = defineSlots<{
     color: var(--color-neutral-txt-primary);
   }
 
-  .icon {
-    font-size: 2.4rem;
-  }
-
   .status {
     color: var(--color-neutral-txt-secondary);
     display: flex;

package/lib/components/ui/info/UiInfo.vue

@@ -1,7 +1,7 @@
 <!-- v4 -->
 <template>
   <div class="ui-info">
-    <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
+    <VtsIcon class="icon" :name="icon" size="medium" />
     <p v-tooltip="!wrap" class="typo-body-regular-small" :class="{ 'text-ellipsis': !wrap }">
       <slot />
     </p>
@@ -11,16 +11,8 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import {
-  faCheck,
-  faCircle,
-  faExclamation,
-  faInfo,
-  faMinus,
-  faXmark,
-  type IconDefinition,
-} from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
+import type { IconName } from '@core/icons'
+import { useMapper } from '@core/packages/mapper'
 
 export type InfoAccent = 'info' | 'success' | 'warning' | 'danger' | 'muted'
 
@@ -33,15 +25,17 @@ defineSlots<{
   default(): any
 }>()
 
-const iconByAccent: Record<InfoAccent, IconDefinition> = {
-  info: faInfo,
-  success: faCheck,
-  warning: faExclamation,
-  danger: faXmark,
-  muted: faMinus,
-}
-
-const icon = computed(() => iconByAccent[accent])
+const icon = useMapper<InfoAccent, IconName>(
+  () => accent,
+  {
+    info: 'legacy:status:info',
+    success: 'legacy:status:success',
+    warning: 'legacy:status:warning',
+    danger: 'legacy:status:danger',
+    muted: 'legacy:status:muted',
+  },
+  'muted'
+)
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/ui/input/UiInput.vue

@@ -1,7 +1,7 @@
 <!-- v5 -->
 <template>
   <div :class="toVariants({ accent, disabled })" class="ui-input" @click.self="focus()">
-    <VtsIcon :icon accent="current" class="left-icon" />
+    <VtsIcon :name="icon" size="medium" class="left-icon" />
     <input
       :id="wrapperController?.id ?? id"
       ref="inputRef"
@@ -14,14 +14,14 @@
     />
     <UiButtonIcon
       v-if="!disabled && modelValue && clearable"
-      :icon="faXmark"
+      icon="fa:xmark"
       :target-scale="1.6"
       accent="brand"
       size="small"
       @click="clear()"
     />
     <slot v-if="slots['right-icon'] || rightIcon" name="right-icon">
-      <VtsIcon :icon="rightIcon" accent="current" class="right-icon" />
+      <VtsIcon :name="rightIcon" size="medium" class="right-icon" />
     </slot>
   </div>
 </template>
@@ -30,11 +30,10 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { LabelAccent } from '@core/components/ui/label/UiLabel.vue'
+import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref, useAttrs, watchEffect } from 'vue'
 
 type InputAccent = 'brand' | 'warning' | 'danger'
@@ -55,8 +54,8 @@ const {
   required?: boolean
   disabled?: boolean
   type?: InputType
-  icon?: IconDefinition
-  rightIcon?: IconDefinition
+  icon?: IconName
+  rightIcon?: IconName
   clearable?: boolean
 }>()
 

package/lib/components/ui/label/UiLabel.vue

@@ -1,7 +1,7 @@
 <!-- v1 -->
 <template>
   <div :class="toVariants({ accent })" class="ui-label">
-    <VtsIcon accent="current" :icon class="icon" />
+    <VtsIcon :name="icon" size="medium" class="icon" />
     <label :for="htmlFor" :class="{ required }" class="typo-caption label">
       <slot />
     </label>
@@ -12,8 +12,8 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { useI18n } from 'vue-i18n'
 
 export type LabelAccent = 'neutral' | 'warning' | 'danger'
@@ -21,7 +21,7 @@ export type LabelAccent = 'neutral' | 'warning' | 'danger'
 const { for: htmlFor } = defineProps<{
   accent: LabelAccent
   for?: string
-  icon?: IconDefinition
+  icon?: IconName
   required?: boolean
   href?: string
 }>()