refactor: simplify icons usage

Barbapapazes · Barbapapazes · commit 7b193e3e0d57 · 2025-04-24T10:14:59.000+02:00
diff --git a/.playground/src/pages/components/switch.vue b/.playground/src/pages/components/switch.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useColor } from '@/app/composables/useColor'
 import Switch from '@/ui/components/Switch/Switch.vue'
-import { check as checkIcon, close as closeIcon } from '@/ui/icons'
+import { checkIcon, closeIcon } from '@/ui/icons'
 import { ref } from 'vue'
 
 const { color } = useColor()
diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
@@ -5,7 +5,7 @@ import type { ComponentConfig } from '@/ui/types/utils'
 import Avatar from '@/ui/components/Avatar/Avatar.vue'
 import Button from '@/ui/components/Button/Button.vue'
 import Icon from '@/ui/components/Icon/Icon.vue'
-import { close as closeIcon } from '@/ui/icons'
+import { closeIcon } from '@/ui/icons'
 import theme from '@/ui/theme/alert'
 import { Primitive } from 'reka-ui'
 import { tv } from 'tailwind-variants'
diff --git a/src/components/Breadcrumb/Breadcrumb.vue b/src/components/Breadcrumb/Breadcrumb.vue
@@ -6,7 +6,7 @@ import type { DynamicSlots } from '@/ui/types/utils'
 import Avatar from '@/ui/components/Avatar/Avatar.vue'
 import Icon from '@/ui/components/Icon/Icon.vue'
 import Link from '@/ui/components/Link/Link.vue'
-import { separator as separatorIcon } from '@/ui/icons'
+import { separatorIcon } from '@/ui/icons'
 import theme from '@/ui/theme/breadcrumb'
 import { get } from '@/ui/utils/get'
 import { pickLinkProps } from '@/ui/utils/pick-link-props'
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
@@ -8,7 +8,7 @@ import Icon from '@/ui/components/Icon/Icon.vue'
 import Link from '@/ui/components/Link/Link.vue'
 import { useButtonGroup } from '@/ui/composables/useButtonGroup'
 import { useComponentIcons } from '@/ui/composables/useComponentIcons'
-import { loading as loadingIcon } from '@/ui/icons'
+import { loadingIcon } from '@/ui/icons'
 import theme from '@/ui/theme/button'
 import { omit } from '@/ui/utils/omit'
 import { pickLinkProps } from '@/ui/utils/pick-link-props'
diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
@@ -10,7 +10,7 @@ import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
 import type { AcceptableValue } from 'reka-ui'
 import type { VariantProps } from 'tailwind-variants'
 import Button from '@/ui/components/Button/Button.vue'
-import { arrowLeft as arrowLeftIcon, arrowRight as arrowRightIcon } from '@/ui/icons'
+import { arrowLeftIcon, arrowRightIcon } from '@/ui/icons'
 import theme from '@/ui/theme/carousel'
 import { computedAsync } from '@vueuse/core'
 import { reactivePick } from '@vueuse/shared'
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
@@ -3,7 +3,7 @@ import type { ComponentConfig } from '@/ui/types/utils'
 import type { CheckboxRootProps } from 'reka-ui'
 import Icon from '@/ui/components/Icon/Icon.vue'
 import { useFormField } from '@/ui/composables/useFormField'
-import { check as checkIcon, minus as minusIcon } from '@/ui/icons'
+import { checkIcon, minusIcon } from '@/ui/icons'
 import theme from '@/ui/theme/checkbox'
 import { reactivePick } from '@vueuse/shared'
 import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from 'reka-ui'
diff --git a/src/components/CommandPalette/CommandPalette.vue b/src/components/CommandPalette/CommandPalette.vue
@@ -17,7 +17,7 @@ import Icon from '@/ui/components/Icon/Icon.vue'
 import Input from '@/ui/components/Input/Input.vue'
 import Kbd from '@/ui/components/Kbd/Kbd.vue'
 import Link from '@/ui/components/Link/Link.vue'
-import { check as checkIcon, close as closeIcon, loading as loadingIcon } from '@/ui/icons'
+import { checkIcon, closeIcon, loadingIcon } from '@/ui/icons'
 import theme from '@/ui/theme/command-palette'
 import { highlight } from '@/ui/utils/fuse'
 import { get } from '@/ui/utils/get'
diff --git a/src/components/ContextMenuContent/ContextMenuContent.vue b/src/components/ContextMenuContent/ContextMenuContent.vue
@@ -11,7 +11,7 @@ import Icon from '@/ui/components/Icon/Icon.vue'
 import Kbd from '@/ui/components/Kbd/Kbd.vue'
 import Link from '@/ui/components/Link/Link.vue'
 import { usePortal } from '@/ui/composables/usePortal'
-import { check as checkIcon, chevronRight as chevronRightIcon, external as externalIcon, loading as loadingIcon } from '@/ui/icons'
+import { checkIcon, chevronRightIcon, externalIcon, loadingIcon } from '@/ui/icons'
 import { get } from '@/ui/utils/get'
 import { isArrayOfArray } from '@/ui/utils/is-array-of-array'
 import { omit } from '@/ui/utils/omit'
diff --git a/src/components/DropdownMenuContent/DropdownMenuContent.vue b/src/components/DropdownMenuContent/DropdownMenuContent.vue
@@ -12,7 +12,7 @@ import Icon from '@/ui/components/Icon/Icon.vue'
 import Kbd from '@/ui/components/Kbd/Kbd.vue'
 import Link from '@/ui/components/Link/Link.vue'
 import { usePortal } from '@/ui/composables/usePortal'
-import { check as checkIcon, chevronRight as chevronRightIcon, external as externalIcon, loading as loadingIcon } from '@/ui/icons'
+import { checkIcon, chevronRightIcon, externalIcon, loadingIcon } from '@/ui/icons'
 import { get } from '@/ui/utils/get'
 import { isArrayOfArray } from '@/ui/utils/is-array-of-array'
 import { omit } from '@/ui/utils/omit'
diff --git a/src/components/InputMenu/InputMenu.vue b/src/components/InputMenu/InputMenu.vue
@@ -13,7 +13,7 @@ import { useButtonGroup } from '@/ui/composables/useButtonGroup'
 import { useComponentIcons } from '@/ui/composables/useComponentIcons'
 import { useFormField } from '@/ui/composables/useFormField'
 import { usePortal } from '@/ui/composables/usePortal'
-import { check as checkIcon, chevronDown as chevronDownIcon, remove as removeIcon } from '@/ui/icons'
+import { checkIcon, chevronDownIcon, removeIcon } from '@/ui/icons'
 import theme from '@/ui/theme/input-menu'
 import { compare } from '@/ui/utils/compare'
 import { get } from '@/ui/utils/get'
diff --git a/src/components/InputNumber/InputNumber.vue b/src/components/InputNumber/InputNumber.vue
@@ -4,7 +4,7 @@ import type { NumberFieldRootProps } from 'reka-ui'
 import type { VariantProps } from 'tailwind-variants'
 import Button from '@/ui/components/Button/Button.vue'
 import { useFormField } from '@/ui/composables/useFormField'
-import { chevronDown as chevronDownIcon, chevronUp as chevronUpIcon, minus as minusIcon, plus as plusIcon } from '@/ui/icons'
+import { chevronDownIcon, chevronUpIcon, minusIcon, plusIcon } from '@/ui/icons'
 import theme from '@/ui/theme/input-number'
 import { reactivePick } from '@vueuse/shared'
 import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
@@ -5,7 +5,7 @@ import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRoo
 import type { EmitsToProps } from 'vue'
 import Button from '@/ui/components/Button/Button.vue'
 import { usePortal } from '@/ui/composables/usePortal'
-import { close as closeIcon } from '@/ui/icons'
+import { closeIcon } from '@/ui/icons'
 import theme from '@/ui/theme/modal'
 import { reactivePick } from '@vueuse/shared'
 import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits, VisuallyHidden } from 'reka-ui'
diff --git a/src/components/Pagination/Pagination.vue b/src/components/Pagination/Pagination.vue
@@ -2,7 +2,7 @@
 import type { ButtonProps } from '@/ui/components/Button/Button.vue'
 import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui'
 import Button from '@/ui/components/Button/Button.vue'
-import { chevronDoubleLeft as chevronDoubleLeftIcon, chevronDoubleRight as chevronDoubleRightIcon, chevronLeft as chevronLeftIcon, chevronRight as chevronRightIcon, ellipsis as ellipsisIcon } from '@/ui/icons'
+import { chevronDoubleLeftIcon, chevronDoubleRightIcon, chevronLeftIcon, chevronRightIcon, ellipsisIcon } from '@/ui/icons'
 import theme from '@/ui/theme/pagination'
 import { reactivePick } from '@vueuse/core'
 import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, useForwardPropsEmits } from 'reka-ui'
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
@@ -13,7 +13,7 @@ import { useButtonGroup } from '@/ui/composables/useButtonGroup'
 import { useComponentIcons } from '@/ui/composables/useComponentIcons'
 import { useFormField } from '@/ui/composables/useFormField'
 import { usePortal } from '@/ui/composables/usePortal'
-import { check as checkIcon, chevronDown as chevronDownIcon } from '@/ui/icons'
+import { checkIcon, chevronDownIcon } from '@/ui/icons'
 import theme from '@/ui/theme/select'
 import { compare } from '@/ui/utils/compare'
 import { get } from '@/ui/utils/get'
diff --git a/src/components/SelectMenu/SelectMenu.vue b/src/components/SelectMenu/SelectMenu.vue
@@ -14,7 +14,7 @@ import { useButtonGroup } from '@/ui/composables/useButtonGroup'
 import { useComponentIcons } from '@/ui/composables/useComponentIcons'
 import { useFormField } from '@/ui/composables/useFormField'
 import { usePortal } from '@/ui/composables/usePortal'
-import { check as checkIcon, chevronDown as chevronDownIcon } from '@/ui/icons'
+import { checkIcon, chevronDownIcon } from '@/ui/icons'
 import theme from '@/ui/theme/select-menu'
 import { compare } from '@/ui/utils/compare'
 import { get } from '@/ui/utils/get'
diff --git a/src/components/Switch/Switch.vue b/src/components/Switch/Switch.vue
@@ -3,7 +3,7 @@ import type { SwitchRootProps } from 'reka-ui'
 import type { VariantProps } from 'tailwind-variants'
 import Icon from '@/ui/components/Icon/Icon.vue'
 import { useFormField } from '@/ui/composables/useFormField'
-import { loading as loadingIcon } from '@/ui/icons'
+import { loadingIcon } from '@/ui/icons'
 import theme from '@/ui/theme/switch'
 import { reactivePick } from '@vueuse/shared'
 import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka-ui'
diff --git a/src/components/Toast/Toast.vue b/src/components/Toast/Toast.vue
@@ -6,7 +6,7 @@ import type { ToastRootEmits, ToastRootProps } from 'reka-ui'
 import Avatar from '@/ui/components/Avatar/Avatar.vue'
 import Button from '@/ui/components/Button/Button.vue'
 import Icon from '@/ui/components/Icon/Icon.vue'
-import { close as closeIcon } from '@/ui/icons'
+import { closeIcon } from '@/ui/icons'
 import theme from '@/ui/theme/toast'
 import { reactivePick } from '@vueuse/core'
 import { ToastAction, ToastClose, ToastDescription, ToastRoot, ToastTitle, useForwardPropsEmits } from 'reka-ui'
diff --git a/src/composables/useComponentIcons.ts b/src/composables/useComponentIcons.ts
@@ -1,6 +1,6 @@
 import type { AvatarProps } from '@/ui/components/Avatar/Avatar.vue'
 import type { MaybeRefOrGetter } from 'vue'
-import { loading as loadingIcon } from '@/ui/icons'
+import { loadingIcon } from '@/ui/icons'
 import { computed, toValue } from 'vue'
 
 export interface UseComponentIconsProps {
diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -1,35 +1,35 @@
-export const arrowLeft = 'i-lucide-arrow-left'
+export const arrowLeftIcon = 'i-lucide-arrow-left'
 
-export const arrowRight = 'i-lucide-arrow-right'
+export const arrowRightIcon = 'i-lucide-arrow-right'
 
-export const check = 'i-lucide-check'
+export const checkIcon = 'i-lucide-check'
 
-export const chevronDoubleLeft = 'i-lucide-chevrons-left'
+export const chevronDoubleLeftIcon = 'i-lucide-chevrons-left'
 
-export const chevronDoubleRight = 'i-lucide-chevrons-right'
+export const chevronDoubleRightIcon = 'i-lucide-chevrons-right'
 
-export const chevronDown = 'i-lucide-chevron-down'
+export const chevronDownIcon = 'i-lucide-chevron-down'
 
-export const chevronLeft = 'i-lucide-chevron-left'
+export const chevronLeftIcon = 'i-lucide-chevron-left'
 
-export const chevronRight = 'i-lucide-chevron-right'
+export const chevronRightIcon = 'i-lucide-chevron-right'
 
-export const chevronUp = 'i-lucide-chevron-up'
+export const chevronUpIcon = 'i-lucide-chevron-up'
 
-export const close = 'i-lucide-x'
+export const closeIcon = 'i-lucide-x'
 
-export const ellipsis = 'i-lucide-ellipsis'
+export const ellipsisIcon = 'i-lucide-ellipsis'
 
-export const external = 'i-lucide-arrow-up-right'
+export const externalIcon = 'i-lucide-arrow-up-right'
 
-export const loading = 'i-lucide-loader'
+export const loadingIcon = 'i-lucide-loader'
 
-export const minus = 'i-lucide-minus'
+export const minusIcon = 'i-lucide-minus'
 
-export const plus = 'i-lucide-plus'
+export const plusIcon = 'i-lucide-plus'
 
-export const search = 'i-lucide-search'
+export const searchIcon = 'i-lucide-search'
 
-export const remove = close
+export const removeIcon = closeIcon
 
-export const separator = chevronRight
+export const separatorIcon = chevronRightIcon
