From e2c368a1849f205d10ad826c1a5eb2cd90f05a8c Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Mon, 27 May 2024 22:35:55 +0800
Subject: [PATCH] feat(components): icons

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 .../3.writing/2.components.md                 | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/content/1.getting-started/3.writing/2.components.md b/content/1.getting-started/3.writing/2.components.md
index edd8f13b..ca50a31f 100644
--- a/content/1.getting-started/3.writing/2.components.md
+++ b/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