fix(site): fix icon style customizer (#3511)

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 {

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">

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>

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>;