feat(Button): handle avatar prop

src/runtime/components/Button.vue

@@ -5,6 +5,7 @@ import _appConfig from '#build/app.config'
 import theme from '#build/ui/button'
 import type { LinkProps } from './Link.vue'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps } from '../types'
 import type { PartialString } from '../types/utils'
 import { formLoadingInjectionKey } from '../composables/useFormField'
 
@@ -99,6 +100,7 @@ const ui = computed(() => button({
   >
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
     <slot>

src/runtime/composables/useComponentIcons.ts

@@ -1,9 +1,12 @@
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 import { useAppConfig } from '#imports'
+import type { AvatarProps } from '../types'
 
 export interface UseComponentIconsProps {
   /** Display an icon based on the `leading` and `trailing` props. */
   icon?: string
+  /** Display an avatar on the left side. */
+  avatar?: AvatarProps
   /** When `true`, the icon will be displayed on the left side. */
   leading?: boolean
   /** Display an icon on the left side. */