@vc-shell/framework 1.1.4 → 1.1.5

package/ui/components/atoms/vc-icon/vc-icon-examples.vue

@@ -1,183 +1,544 @@
 <template>
-  <div class="icon-examples">
-    <h2>Examples of Using Different Icon Libraries</h2>
+  <div class="tw-p-6 tw-max-w-5xl tw-mx-auto">
+    <h1 class="tw-text-2xl tw-font-bold tw-mb-6">VcIcon Examples</h1>
 
-    <div class="icon-section">
-      <h3>Font Awesome Icons</h3>
-      <div class="icon-grid">
-        <div class="icon-item">
-          <VcIcon icon="fas fa-home" />
-          <span>fas fa-home</span>
-        </div>
-        <div class="icon-item">
-          <VcIcon icon="far fa-user" />
-          <span>far fa-user</span>
+    <!-- Material Icons Section -->
+    <section class="tw-mb-12 tw-border tw-border-gray-200 tw-rounded-lg tw-p-5 tw-shadow-sm">
+      <h2 class="tw-text-xl tw-font-bold tw-mb-4 tw-border-b tw-pb-2">Material Icons</h2>
+
+      <!-- Size Variations -->
+      <div class="tw-mb-8">
+        <h3 class="tw-text-lg tw-font-semibold tw-mb-3">Size Variations</h3>
+        <div class="tw-flex tw-flex-wrap tw-gap-8 tw-items-end">
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="material-home"
+              size="xs"
+            />
+            <span class="tw-text-xs">xs</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="material-home"
+              size="s"
+            />
+            <span class="tw-text-xs">s</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="material-home"
+              size="m"
+            />
+            <span class="tw-text-xs">m (default)</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="material-home"
+              size="l"
+            />
+            <span class="tw-text-xs">l</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="material-home"
+              size="xl"
+            />
+            <span class="tw-text-xs">xl</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="material-home"
+              size="xxl"
+            />
+            <span class="tw-text-xs">xxl</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="material-home"
+              size="xxxl"
+            />
+            <span class="tw-text-xs">xxxl</span>
+          </div>
         </div>
-        <div class="icon-item">
+      </div>
+    </section>
+
+    <!-- Bootstrap Icons Section -->
+    <section class="tw-mb-12 tw-border tw-border-gray-200 tw-rounded-lg tw-p-5 tw-shadow-sm">
+      <h2 class="tw-text-xl tw-font-bold tw-mb-4 tw-border-b tw-pb-2">Bootstrap Icons</h2>
+      <div class="tw-flex tw-flex-wrap tw-gap-8 tw-items-end">
+        <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
           <VcIcon
-            icon="fas fa-cog"
-            size="xl"
+            icon="bi-house"
+            size="xs"
           />
-          <span>fas fa-cog (xl)</span>
+          <span class="tw-text-xs">xs</span>
         </div>
-        <div class="icon-item">
+        <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
           <VcIcon
-            icon="fas fa-exclamation-triangle"
-            variant="warning"
+            icon="bi-house"
+            size="s"
           />
-          <span>fas fa-exclamation-triangle (warning)</span>
+          <span class="tw-text-xs">s</span>
         </div>
-      </div>
-    </div>
-
-    <div class="icon-section">
-      <h3>Material Icons</h3>
-      <div class="icon-grid">
-        <div class="icon-item">
-          <VcIcon icon="material-home" />
-          <span>material-home</span>
+        <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+          <VcIcon
+            icon="bi-house"
+            size="m"
+          />
+          <span class="tw-text-xs">m (default)</span>
         </div>
-        <div class="icon-item">
-          <VcIcon icon="material-person" />
-          <span>material-person</span>
+        <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+          <VcIcon
+            icon="bi-house"
+            size="l"
+          />
+          <span class="tw-text-xs">l</span>
         </div>
-        <div class="icon-item">
+        <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
           <VcIcon
-            icon="material-settings"
+            icon="bi-house"
             size="xl"
           />
-          <span>material-settings (xl)</span>
+          <span class="tw-text-xs">xl</span>
         </div>
-        <div class="icon-item">
+        <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
           <VcIcon
-            icon="material-warning"
-            variant="warning"
+            icon="bi-house"
+            size="xxl"
+          />
+          <span class="tw-text-xs">xxl</span>
+        </div>
+        <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+          <VcIcon
+            icon="bi-house"
+            size="xxxl"
           />
-          <span>material-warning (warning)</span>
+          <span class="tw-text-xs">xxxl</span>
         </div>
       </div>
-    </div>
+    </section>
 
-    <div class="icon-section">
-      <h3>Bootstrap Icons</h3>
-      <div class="icon-grid">
-        <div class="icon-item">
-          <VcIcon icon="bi-house" />
-          <span>bi-house</span>
+    <!-- Font Awesome Icons Section -->
+    <section class="tw-mb-12 tw-border tw-border-gray-200 tw-rounded-lg tw-p-5 tw-shadow-sm">
+      <h2 class="tw-text-xl tw-font-bold tw-mb-4 tw-border-b tw-pb-2">Font Awesome Icons</h2>
+
+      <!-- Size Variations -->
+      <div class="tw-mb-8">
+        <div class="tw-flex tw-flex-wrap tw-gap-8 tw-items-end">
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="fas fa-home"
+              size="xs"
+            />
+            <span class="tw-text-xs">xs</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="fas fa-home"
+              size="s"
+            />
+            <span class="tw-text-xs">s</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="fas fa-home"
+              size="m"
+            />
+            <span class="tw-text-xs">m (default)</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="fas fa-home"
+              size="l"
+            />
+            <span class="tw-text-xs">l</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="fas fa-home"
+              size="xl"
+            />
+            <span class="tw-text-xs">xl</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="fas fa-home"
+              size="xxl"
+            />
+            <span class="tw-text-xs">xxl</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="fas fa-home"
+              size="xxxl"
+            />
+            <span class="tw-text-xs">xxxl</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Lucide Icons Section -->
+    <section class="tw-mb-12 tw-border tw-border-gray-200 tw-rounded-lg tw-p-5 tw-shadow-sm">
+      <h2 class="tw-text-xl tw-font-bold tw-mb-4 tw-border-b tw-pb-2">Lucide Icons</h2>
+
+      <!-- Size Variations -->
+      <div class="tw-mb-8">
+        <h3 class="tw-text-lg tw-font-semibold tw-mb-3">Size Variations</h3>
+        <div class="tw-flex tw-flex-wrap tw-gap-8 tw-items-end">
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="lucide-home"
+              size="xs"
+            />
+            <span class="tw-text-xs">xs</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="lucide-home"
+              size="s"
+            />
+            <span class="tw-text-xs">s</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="lucide-home"
+              size="m"
+            />
+            <span class="tw-text-xs">m (default)</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="lucide-home"
+              size="l"
+            />
+            <span class="tw-text-xs">l</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="lucide-home"
+              size="xl"
+            />
+            <span class="tw-text-xs">xl</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="lucide-home"
+              size="xxl"
+            />
+            <span class="tw-text-xs">xxl</span>
+          </div>
+          <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <VcIcon
+              icon="lucide-home"
+              size="xxxl"
+            />
+            <span class="tw-text-xs">xxxl</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Comparison Section -->
+    <section class="tw-mb-12 tw-border tw-border-gray-200 tw-rounded-lg tw-p-5 tw-shadow-sm">
+      <h2 class="tw-text-xl tw-font-bold tw-mb-4 tw-border-b tw-pb-2">Library Comparison</h2>
+
+      <!-- Size M Comparison -->
+      <div class="tw-mb-8">
+        <h3 class="tw-text-lg tw-font-semibold tw-mb-3">Default Size (M) Comparison</h3>
+        <div class="tw-bg-gray-50 tw-p-5 tw-rounded-lg">
+          <div class="tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-8 tw-place-items-center">
+            <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+              <VcIcon
+                icon="material-home"
+                size="m"
+              />
+              <span class="tw-text-sm tw-font-medium">Material</span>
+            </div>
+            <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+              <VcIcon
+                icon="bi-house"
+                size="m"
+              />
+              <span class="tw-text-sm tw-font-medium">Bootstrap</span>
+            </div>
+            <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+              <VcIcon
+                icon="fas fa-home"
+                size="m"
+              />
+              <span class="tw-text-sm tw-font-medium">FontAwesome</span>
+            </div>
+            <div class="tw-flex tw-flex-col tw-items-center tw-gap-2">
+              <VcIcon
+                icon="lucide-home"
+                size="m"
+              />
+              <span class="tw-text-sm tw-font-medium">Lucide</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Color Variants -->
+      <div>
+        <h3 class="tw-text-lg tw-font-semibold tw-mb-3">Color Variants</h3>
+        <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4">
+          <div class="tw-bg-gray-50 tw-p-4 tw-rounded-lg">
+            <h4 class="tw-font-medium tw-mb-2 tw-text-center">Warning</h4>
+            <div class="tw-flex tw-justify-center tw-gap-6">
+              <VcIcon
+                icon="material-warning"
+                variant="warning"
+                size="xl"
+              />
+              <VcIcon
+                icon="bi-exclamation-triangle"
+                variant="warning"
+                size="xl"
+              />
+              <VcIcon
+                icon="fas fa-exclamation-triangle"
+                variant="warning"
+                size="xl"
+              />
+            </div>
+          </div>
+          <div class="tw-bg-gray-50 tw-p-4 tw-rounded-lg">
+            <h4 class="tw-font-medium tw-mb-2 tw-text-center">Danger</h4>
+            <div class="tw-flex tw-justify-center tw-gap-6">
+              <VcIcon
+                icon="material-error"
+                variant="danger"
+                size="xl"
+              />
+              <VcIcon
+                icon="bi-exclamation-circle"
+                variant="danger"
+                size="xl"
+              />
+              <VcIcon
+                icon="fas fa-times-circle"
+                variant="danger"
+                size="xl"
+              />
+            </div>
+          </div>
+          <div class="tw-bg-gray-50 tw-p-4 tw-rounded-lg">
+            <h4 class="tw-font-medium tw-mb-2 tw-text-center">Success</h4>
+            <div class="tw-flex tw-justify-center tw-gap-6">
+              <VcIcon
+                icon="material-check_circle"
+                variant="success"
+                size="xl"
+              />
+              <VcIcon
+                icon="bi-check-circle"
+                variant="success"
+                size="xl"
+              />
+              <VcIcon
+                icon="fas fa-check-circle"
+                variant="success"
+                size="xl"
+              />
+            </div>
+          </div>
         </div>
-        <div class="icon-item">
-          <VcIcon icon="bi-person" />
-          <span>bi-person</span>
+      </div>
+    </section>
+
+    <!-- CSS Styling Examples -->
+    <section class="tw-mb-12 tw-border tw-border-gray-200 tw-rounded-lg tw-p-5 tw-shadow-sm">
+      <h2 class="tw-text-xl tw-font-bold tw-mb-4 tw-border-b tw-pb-2">CSS Styling Examples</h2>
+
+      <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-8">
+        <!-- Base Font Size Example -->
+        <div class="tw-bg-gray-50 tw-p-4 tw-rounded-lg">
+          <h3 class="tw-font-semibold tw-mb-3">Inheriting Font Size</h3>
+          <div
+            style="font-size: 32px"
+            class="tw-flex tw-gap-6 tw-justify-center"
+          >
+            <VcIcon icon="fas fa-star" />
+            <VcIcon icon="material-home" />
+            <VcIcon icon="bi-heart" />
+            <VcIcon icon="lucide-settings" />
+          </div>
+          <p class="tw-text-sm tw-text-gray-600 tw-mt-2 tw-text-center">font-size: 32px</p>
         </div>
-        <div class="icon-item">
+
+        <!-- Size Classes Example -->
+        <div class="tw-bg-gray-50 tw-p-4 tw-rounded-lg">
+          <h3 class="tw-font-semibold tw-mb-3">CSS Size Classes</h3>
+          <div class="tw-flex tw-flex-wrap tw-gap-8 tw-justify-center">
+            <div class="tw-flex tw-flex-col tw-items-center tw-gap-1">
+              <VcIcon
+                icon="fas fa-user"
+                class="icon-size-small"
+              />
+              <span class="tw-text-xs">16px</span>
+            </div>
+            <div class="tw-flex tw-flex-col tw-items-center tw-gap-1">
+              <VcIcon
+                icon="fas fa-user"
+                class="icon-size-medium"
+              />
+              <span class="tw-text-xs">24px</span>
+            </div>
+            <div class="tw-flex tw-flex-col tw-items-center tw-gap-1">
+              <VcIcon
+                icon="fas fa-user"
+                class="icon-size-large"
+              />
+              <span class="tw-text-xs">36px</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-8 tw-mt-6">
+        <!-- Hover Effect -->
+        <div class="tw-bg-gray-50 tw-p-4 tw-rounded-lg">
+          <h3 class="tw-font-semibold tw-mb-3">Hover Effects (try hovering)</h3>
+          <div class="tw-flex tw-justify-center tw-gap-8">
+            <VcIcon
+              icon="fas fa-heart"
+              class="hover-icon"
+            />
+            <VcIcon
+              icon="material-favorite"
+              class="hover-icon"
+            />
+            <VcIcon
+              icon="bi-star"
+              class="hover-icon"
+            />
+            <VcIcon
+              icon="lucide-thumbs-up"
+              class="hover-icon"
+            />
+          </div>
+        </div>
+
+        <!-- Custom Size vs Preset Size -->
+        <div class="tw-bg-gray-50 tw-p-4 tw-rounded-lg">
+          <h3 class="tw-font-semibold tw-mb-3">Custom Size vs Preset Size</h3>
+          <div class="tw-flex tw-flex-wrap tw-justify-center tw-gap-8 tw-items-end">
+            <div class="tw-flex tw-flex-col tw-items-center tw-gap-1">
+              <VcIcon
+                icon="material-star"
+                :custom-size="40"
+              />
+              <span class="tw-text-xs">customSize="40"</span>
+            </div>
+            <div class="tw-flex tw-flex-col tw-items-center tw-gap-1">
+              <VcIcon
+                icon="material-star"
+                size="xl"
+              />
+              <span class="tw-text-xs">size="xl"</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Common Icon Use Cases -->
+    <section class="tw-border tw-border-gray-200 tw-rounded-lg tw-p-5 tw-shadow-sm">
+      <h2 class="tw-text-xl tw-font-bold tw-mb-4 tw-border-b tw-pb-2">Common Icon Use Cases</h2>
+
+      <div class="tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-4">
+        <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm">
           <VcIcon
-            icon="bi-gear"
+            icon="material-shopping_cart"
             size="xl"
           />
-          <span>bi-gear (xl)</span>
+          <span class="tw-text-sm tw-mt-2">Cart</span>
         </div>
-        <div class="icon-item">
+        <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm">
           <VcIcon
-            icon="bi-exclamation-triangle"
-            variant="warning"
+            icon="material-account_circle"
+            size="xl"
           />
-          <span>bi-exclamation-triangle (warning)</span>
+          <span class="tw-text-sm tw-mt-2">Account</span>
         </div>
-      </div>
-    </div>
-
-    <div class="icon-section">
-      <h3>Lucide Icons</h3>
-      <div class="icon-grid">
-        <div class="icon-item">
+        <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm">
           <VcIcon
-            icon="HomeIcon"
-            type="lucide"
+            icon="material-favorite"
+            size="xl"
           />
-          <span>HomeIcon (legacy format)</span>
+          <span class="tw-text-sm tw-mt-2">Wishlist</span>
         </div>
-        <div class="icon-item">
-          <VcIcon icon="lucide-home" />
-          <span>lucide-home</span>
+        <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm">
+          <VcIcon
+            icon="material-search"
+            size="xl"
+          />
+          <span class="tw-text-sm tw-mt-2">Search</span>
         </div>
-        <div class="icon-item">
+        <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm">
           <VcIcon
-            icon="lucide-settings"
+            icon="material-check_circle"
+            variant="success"
             size="xl"
           />
-          <span>lucide-settings (xl)</span>
+          <span class="tw-text-sm tw-mt-2">In Stock</span>
         </div>
-        <div class="icon-item">
+        <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm">
           <VcIcon
-            icon="lucide-alert-triangle"
+            icon="material-error_outline"
             variant="warning"
+            size="xl"
           />
-          <span>lucide-alert-triangle (warning)</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="icon-section">
-      <h3>Mixed Usage</h3>
-      <div class="icon-grid">
-        <div class="icon-item">
-          <VcIcon icon="fas fa-home" />
-          <span>Font Awesome</span>
-        </div>
-        <div class="icon-item">
-          <VcIcon icon="material-settings" />
-          <span>Material</span>
+          <span class="tw-text-sm tw-mt-2">Low Stock</span>
         </div>
-        <div class="icon-item">
-          <VcIcon icon="bi-gear" />
-          <span>Bootstrap</span>
+        <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm">
+          <VcIcon
+            icon="material-highlight_off"
+            variant="danger"
+            size="xl"
+          />
+          <span class="tw-text-sm tw-mt-2">Out of Stock</span>
         </div>
-        <div class="icon-item">
-          <VcIcon icon="lucide-home" />
-          <span>Lucide</span>
+        <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm">
+          <VcIcon
+            icon="material-local_shipping"
+            size="xl"
+          />
+          <span class="tw-text-sm tw-mt-2">Shipping</span>
         </div>
       </div>
-    </div>
+    </section>
   </div>
 </template>
 
-<script lang="ts" setup>
-import VcIcon from "./vc-icon.vue";
+<script setup lang="ts">
+import { VcIcon } from "./index";
 </script>
 
 <style lang="scss" scoped>
-.icon-examples {
-  padding: 20px;
-  font-family: sans-serif;
+.icon-size-small {
+  font-size: 16px;
 }
 
-.icon-section {
-  margin-bottom: 30px;
-
-  h3 {
-    margin-bottom: 15px;
-    color: #444;
-  }
+.icon-size-medium {
+  font-size: 24px;
 }
 
-.icon-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 20px;
+.icon-size-large {
+  font-size: 36px;
 }
 
-.icon-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 15px;
-  border: 1px solid #eee;
-  border-radius: 6px;
-
-  span {
-    margin-top: 10px;
-    font-size: 14px;
-    color: #666;
+.hover-icon {
+  font-size: 24px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &:hover {
+    font-size: 36px;
+    color: #0ea5e9;
   }
 }
 </style>