feat(icon): allow passing a component instead of a name

Author: rijenkii

src/runtime/components/Icon.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
+import type { Component } from 'vue'
+
 export interface IconProps {
-  name: string
+  name: string | Component
   mode?: 'svg' | 'css'
   size?: string | number
   customize?: (
@@ -22,5 +24,6 @@ const iconProps = useForwardProps(reactivePick(props, 'name', 'mode', 'size', 'c
 </script>
 
 <template>
-  <Icon v-bind="iconProps" />
+  <Icon v-if="typeof name === 'string'" v-bind="iconProps" />
+  <component :is="name" v-else />
 </template>

src/runtime/vue/components/Icon.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
+import type { IconProps as NuxtIconProps } from '../../types'
+
 export interface IconProps {
-  name: string
+  name: NuxtIconProps['name']
 }
 </script>
 
@@ -11,5 +13,6 @@ defineProps<IconProps>()
 </script>
 
 <template>
-  <IconifyIcon :icon="name.replace(/^i-/, '')" />
+  <IconifyIcon v-if="typeof name === 'string'" :icon="name.replace(/^i-/, '')" />
+  <component :is="name" v-else />
 </template>