docs(icon): add component icon examples to docs

Author: rijenkii

docs/app/components/content/examples/icon/IconSvgExample.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+
+const UIcon = resolveComponent('UIcon')
+
+const IconLightbulb = () => h(
+  'svg',
+  { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' },
+  [
+    h(
+      'path',
+      {
+        'fill': 'none',
+        'stroke': 'currentColor',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': 2,
+        'd': 'M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4'
+      }
+    )
+  ]
+)
+</script>
+
+<template>
+  <UIcon :name="IconLightbulb" class="size-5" />
+</template>

docs/content/docs/2.components/icon.md

@@ -1,5 +1,5 @@
 ---
-description: A component to display any icon from Iconify.
+description: A component to display any icon from Iconify or another component.
 category: element
 links:
   - label: Icônes
@@ -27,6 +27,30 @@ It's highly recommended to install the icons collections you need, read more abo
 :::
 ::
 
+## Examples
+
+### SVG
+
+You can also pass a Vue component into the `name` prop:
+
+::component-example
+---
+name: 'icon-svg-example'
+---
+::
+
+You can define your icon components yourself, or use [`unplugin-icons`](https://github.com/unplugin/unplugin-icons) to import them directly from SVG files:
+
+```vue
+<script setup lang="ts">
+import IconLightbulb from '~icons/lucide/lightbulb'
+</script>
+
+<template>
+  <UIcon :name="IconLightbulb" class="size-5" />
+</template>
+```
+
 ## API
 
 ### Props