Merge pull request #87 from selemondev/docs/icon

docs(app): #70 icon

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'},
           ]
         }
       ],

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>

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>

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',
+      },
+    },
+},
+```