From 6df716658bf9afa622bf26ec6b378d225f30ac01 Mon Sep 17 00:00:00 2001
From: Selemondev <selemondev@Selemondevs-MacBook-Pro.local>
Date: Tue, 8 Aug 2023 15:30:07 +0300
Subject: [PATCH] docs(app): #70 icon

Closes: #70
---
 docs/docs/.vitepress/config.ts          |  3 +-
 docs/docs/components/Icon/iconBasic.vue | 12 +++++++
 docs/docs/components/Icon/iconSize.vue  | 15 ++++++++
 docs/docs/guide/components/icon.md      | 47 +++++++++++++++++++++++++
 4 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 docs/docs/components/Icon/iconBasic.vue
 create mode 100644 docs/docs/components/Icon/iconSize.vue
 create mode 100644 docs/docs/guide/components/icon.md

diff --git a/docs/docs/.vitepress/config.ts b/docs/docs/.vitepress/config.ts
index c72b042..2028d0f 100644
--- a/docs/docs/.vitepress/config.ts
+++ b/docs/docs/.vitepress/config.ts
@@ -56,7 +56,8 @@ export default defineConfig({
             { text: 'Badge', link: '/guide/components/badge.md'},
             { text: 'Button', link: '/guide/components/button.md'},
             { text: 'Checkbox', link: '/guide/components/checkbox.md'},
-            { text: 'Divider', link: '/guide/components/divider.md'}
+            { text: 'Divider', link: '/guide/components/divider.md'},
+            { text: 'Icon', link: '/guide/components/icon.md'},
           ]
         }
       ],
diff --git a/docs/docs/components/Icon/iconBasic.vue b/docs/docs/components/Icon/iconBasic.vue
new file mode 100644
index 0000000..1a30c04
--- /dev/null
+++ b/docs/docs/components/Icon/iconBasic.vue
@@ -0,0 +1,12 @@
+<template>
+    <div class="grid place-items-center w-full">
+        <div class="flex space-x-3">
+        <WIcon name="logos:windi-css" />
+        <WIcon name="logos:nuxt-icon"/>
+        <WIcon name="logos:vue" />
+        <WIcon name="logos:vueuse" />
+        <WIcon name="logos:vuetifyjs" />
+        <WIcon name="logos:gridsome-icon" />
+    </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/docs/docs/components/Icon/iconSize.vue b/docs/docs/components/Icon/iconSize.vue
new file mode 100644
index 0000000..b516753
--- /dev/null
+++ b/docs/docs/components/Icon/iconSize.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="grid place-items-center w-full">
+        <div class="flex space-x-3">
+        <WIcon name="logos:windi-css" size="8xl" />
+        <WIcon name="logos:nuxt-icon" size="6xl" />
+        <WIcon name="logos:vue" size="4xl" />
+        <WIcon name="logos:vueuse" size="2xl" />
+        <WIcon name="logos:vuetifyjs" size="xl" />
+        <WIcon name="logos:gridsome-icon" size="lg" />
+        <WIcon name="devicon:react" size="base" />
+        <WIcon name="logos:react-query-icon" size="sm" />
+        <WIcon name="logos:svelte-icon" size="xs" />
+    </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/docs/docs/guide/components/icon.md b/docs/docs/guide/components/icon.md
new file mode 100644
index 0000000..d330f08
--- /dev/null
+++ b/docs/docs/guide/components/icon.md
@@ -0,0 +1,47 @@
+---
+title: Icon
+lang: en-US
+---
+
+# Icon
+
+Icons are used to visually represent objects or concepts and allow users to interact with them by clicking or tapping on them.
+
+## Basic Usage
+
+<demo src="../../components/Icon/iconBasic.vue" />
+
+## Size
+
+You can increase the size of the `WIcon` component by passing a size to the `size` prop as shown below:
+
+<demo src="../../components/Icon/iconSize.vue" />
+
+By default, the `WIcon` component's size is `base`
+
+## Preset
+
+```js
+WIcon: {
+    base: {
+      'root': 'block cursor-pointer',
+      'normal': 'text-base',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'base': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '6xl': 'text-6xl',
+      '8xl': 'text-8xl',
+    },
+
+    variants: {
+      default: {
+        root: 'block cursor-pointer',
+      },
+    },
+},
+```