From ac4c3581c4569fb4e22c0dfed3ebd13d16cad817 Mon Sep 17 00:00:00 2001
From: Karsa <contact@karsa.org>
Date: Thu, 7 Aug 2025 11:26:07 +0200
Subject: [PATCH] fix(site): fix icon style customizer (#3511)

---
 docs/.vitepress/theme/components/icons/IconItem.vue        | 2 ++
 docs/.vitepress/theme/components/icons/IconPreview.vue     | 7 +++----
 .../theme/components/icons/SidebarIconCustomizer.vue       | 2 +-
 docs/.vitepress/theme/composables/useIconStyle.ts          | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/.vitepress/theme/components/icons/IconItem.vue b/docs/.vitepress/theme/components/icons/IconItem.vue
index 0fe61a6a3..2ffa2ac0b 100644
--- a/docs/.vitepress/theme/components/icons/IconItem.vue
+++ b/docs/.vitepress/theme/components/icons/IconItem.vue
@@ -178,6 +178,8 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)
   stroke-width: var(--customize-strokeWidth, 2);
   width: calc(var(--customize-size, 24) * 1px);
   height: calc(var(--customize-size, 24) * 1px);
+  max-width: 3rem;
+  max-height: 3rem;
 }
 
 html.absolute-stroke-width .lucide-icon.customizable {
diff --git a/docs/.vitepress/theme/components/icons/IconPreview.vue b/docs/.vitepress/theme/components/icons/IconPreview.vue
index c69c853ab..80305eebf 100644
--- a/docs/.vitepress/theme/components/icons/IconPreview.vue
+++ b/docs/.vitepress/theme/components/icons/IconPreview.vue
@@ -26,10 +26,9 @@ const iconComponent = computed(() => {
     <component
       ref="previewIcon"
       :is="iconComponent"
-      :width="size"
-      :height="size"
-      :stroke="color"
-      :stroke-width="absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth"
+      :size="size"
+      :color="color"
+      :strokeWidth="absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth"
     />
     <svg class="icon-grid" :viewBox="`0 0 ${size} ${size}`" fill="none" stroke-width="0.1" xmlns="http://www.w3.org/2000/svg">
       <g :key="`grid-${i}`" v-for="(_, i) in gridLines">
diff --git a/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue b/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
index 64a13eed7..9a4b6c35a 100644
--- a/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
+++ b/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
@@ -110,7 +110,7 @@ const customizingActive = computed(() => {
         name="size"
         v-model="size"
         :min="16"
-        :max="48"
+        :max="256"
         :step="4"
       />
     </InputField>
diff --git a/docs/.vitepress/theme/composables/useIconStyle.ts b/docs/.vitepress/theme/composables/useIconStyle.ts
index f080635b6..2b5273731 100644
--- a/docs/.vitepress/theme/composables/useIconStyle.ts
+++ b/docs/.vitepress/theme/composables/useIconStyle.ts
@@ -2,7 +2,7 @@
 
 import { ref, inject, Ref } from 'vue';
 
-export const ICON_STYLE_CONTEXT = Symbol('size');
+export const ICON_STYLE_CONTEXT = Symbol('style');
 
 interface IconSizeContext {
   size: Ref<number>;