feat(components): icons

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

content/1.getting-started/3.writing/2.components.md

@@ -370,6 +370,41 @@ The :badge[Badges]{variant="outline"} under each component title marks the compa
   ```
 ::
 
+### Icon
+
+:badge[Docus]{variant="outline" to="https://docus.dev/api/components#icon" target="_blank"}
+
+::alert{to="https://github.com/nuxt-modules/icon" target="_blank"}
+The icon component uses **Nuxt Icon** under the hood. Check out the usage guide from Nuxt Icon.
+::
+
+::code-group
+  ::preview{filename="Preview"}
+    <div class="space-x-2">
+
+    :icon{name="lucide:box"}
+    :icon{name="logos:nuxt-icon"}
+    :icon{name="logos:vue"}
+    :icon{name="logos:nuxt-icon" size="30"}
+
+    </div>
+  ::
+  ```md [Code]
+  :icon{name="lucide:box"}
+  :icon{name="logos:nuxt-icon"}
+  :icon{name="logos:vue"}
+  :icon{name="logos:nuxt-icon"}
+  ```
+::
+
+If you want to use other icons, it is highly recommended to install them locally, which is faster and more reliable on both SSR and client-side.
+
+```bash[Terminal]
+npm i -D @iconify-json/collection-name
+```
+
+`@iconify-json/lucide` and `@iconify-json/vscode-icons` are installed by default.
+
 ## Landing Page Components
 
 ### Hero