feat: allow tag prop to accept Component

closes #20806

Author: KaelWD

packages/vuetify/src/composables/icons.tsx

@@ -6,11 +6,8 @@ import { computed, inject, unref } from 'vue'
 import { consoleWarn, defineComponent, genericComponent, mergeDeep, propsFactory } from '@/util'
 
 // Types
-import type { ComponentPublicInstance, FunctionalComponent, InjectionKey, PropType, Ref } from 'vue'
-
-export type JSXComponent<Props = any> =
-  | { new (): ComponentPublicInstance<Props> }
-  | FunctionalComponent<Props>
+import type { InjectionKey, PropType, Ref } from 'vue'
+import type { JSXComponent } from '@/util'
 
 export type IconValue =
   | string
@@ -58,7 +55,7 @@ export interface IconAliases {
 }
 
 export interface IconProps {
-  tag: string
+  tag: string | JSXComponent
   icon?: IconValue
   disabled?: Boolean
 }
@@ -90,7 +87,7 @@ export const makeIconProps = propsFactory({
   },
   // Could not remove this and use makeTagProps, types complained because it is not required
   tag: {
-    type: String,
+    type: [String, Object, Function] as PropType<string | JSXComponent>,
     required: true,
   },
 }, 'icon')

packages/vuetify/src/composables/index.ts

@@ -16,6 +16,7 @@ export type { DefaultsInstance } from './defaults'
 export type { DisplayBreakpoint, DisplayInstance, DisplayThresholds } from './display'
 export type { SubmitEventPromise } from './form'
 export type { GoToInstance } from './goto'
-export type { IconAliases, IconProps, IconSet, IconOptions, JSXComponent } from './icons'
+export type { IconAliases, IconProps, IconSet, IconOptions } from './icons'
 export type { LocaleInstance, LocaleMessages, RtlInstance, LocaleOptions, RtlOptions } from './locale'
 export type { ThemeDefinition, ThemeInstance } from './theme'
+export type { JSXComponent } from '@/util'

packages/vuetify/src/composables/tag.ts

@@ -1,15 +1,19 @@
 // Utilities
 import { propsFactory } from '@/util'
 
+// Types
+import type { PropType } from 'vue'
+import type { JSXComponent } from '@/util'
+
 // Types
 export interface TagProps {
-  tag: string
+  tag: string | JSXComponent
 }
 
 // Composables
 export const makeTagProps = propsFactory({
   tag: {
-    type: String,
+    type: [String, Object, Function] as PropType<string | JSXComponent>,
     default: 'div',
   },
 }, 'tag')

packages/vuetify/src/util/defineComponent.tsx

@@ -327,3 +327,7 @@ export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance<a
 type ShortEmitsToObject<E> = E extends Record<string, any[]> ? {
   [K in keyof E]: (...args: E[K]) => any;
 } : E;
+
+export type JSXComponent<Props = any> =
+  | { new (): ComponentPublicInstance<Props> }
+  | FunctionalComponent<Props>