feat(Avatar): use NuxtImg component when available

Resolves #2078

docs/content/3.components/avatar.md

@@ -11,6 +11,10 @@ links:
 
 ## Usage
 
+::tip
+The Avatar uses the `NuxtImg` component when `@nuxt/image` is installed, falling back to `img` otherwise.
+::
+
 ### Src
 
 Use the `src` prop to set the image URL. You can pass any property from HTML `<img>` element such as `alt`, `loading`, etc.

src/runtime/components/Avatar.vue

@@ -15,9 +15,9 @@ type AvatarVariants = VariantProps<typeof avatar>
 export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'img'
+   * @defaultValue 'span'
    */
-  as?: string | object
+  as?: any
   src?: string
   alt?: string
   icon?: string
@@ -36,10 +36,11 @@ import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-
 import { reactivePick } from '@vueuse/core'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import UIcon from './Icon.vue'
+import ImageComponent from '#build/ui-image-component'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<AvatarProps>()
+const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
 
 const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
@@ -54,10 +55,10 @@ const ui = computed(() => avatar({
 </script>
 
 <template>
-  <AvatarRoot :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <AvatarRoot :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <AvatarImage
       v-if="src"
-      :as="as"
+      :as="ImageComponent"
       :src="src"
       :alt="alt"
       v-bind="$attrs"

src/templates.ts

@@ -87,6 +87,16 @@ export {}
 `
   })
 
+  templates.push({
+    filename: 'ui-image-component.ts',
+    write: true,
+    getContents: ({ app }) => {
+      const image = app?.components?.find(c => c.pascalName === 'NuxtImg' && !c.filePath.includes('nuxt/dist/app'))
+
+      return image ? `export { default } from "${image.filePath}"` : 'export default "img"'
+    }
+  })
+
   return templates
 }