perf: reorganize the icons and reduce the volume

packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue

@@ -3,7 +3,7 @@ import type { SelectOption } from '@vben-core/typings';
 
 import { useSlots } from 'vue';
 
-import { MdiQuestionMarkCircleOutline } from '@vben-core/icons';
+import { CircleHelp } from '@vben-core/icons';
 import { Input, VbenTooltip } from '@vben-core/shadcn-ui';
 
 defineOptions({
@@ -41,7 +41,7 @@ const slots = useSlots();
 
       <VbenTooltip v-if="slots.tip" side="bottom">
         <template #trigger>
-          <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+          <CircleHelp class="ml-1 size-3 cursor-help" />
         </template>
         <slot name="tip"></slot>
       </VbenTooltip>

packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue

@@ -3,7 +3,7 @@ import type { LayoutType } from '@vben-core/typings';
 
 import { type Component, computed } from 'vue';
 
-import { MdiQuestionMarkCircleOutline } from '@vben-core/icons';
+import { CircleHelp } from '@vben-core/icons';
 import { $t } from '@vben-core/locales';
 import { VbenTooltip } from '@vben-core/shadcn-ui';
 
@@ -84,7 +84,7 @@ function activeClass(theme: string): string[] {
           {{ theme.name }}
           <VbenTooltip v-if="theme.tip" side="bottom">
             <template #trigger>
-              <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+              <CircleHelp class="ml-1 size-3 cursor-help" />
             </template>
             {{ theme.tip }}
           </VbenTooltip>

packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue

@@ -3,7 +3,7 @@ import type { SelectOption } from '@vben-core/typings';
 
 import { useSlots } from 'vue';
 
-import { MdiQuestionMarkCircleOutline } from '@vben-core/icons';
+import { CircleHelp } from '@vben-core/icons';
 import {
   NumberField,
   NumberFieldContent,
@@ -48,7 +48,7 @@ const slots = useSlots();
 
       <VbenTooltip v-if="slots.tip" side="bottom">
         <template #trigger>
-          <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+          <CircleHelp class="ml-1 size-3 cursor-help" />
         </template>
         <slot name="tip"></slot>
       </VbenTooltip>

packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue

@@ -3,7 +3,7 @@ import type { SelectOption } from '@vben-core/typings';
 
 import { useSlots } from 'vue';
 
-import { MdiQuestionMarkCircleOutline } from '@vben-core/icons';
+import { CircleHelp } from '@vben-core/icons';
 import {
   Select,
   SelectContent,
@@ -48,7 +48,7 @@ const slots = useSlots();
 
       <VbenTooltip v-if="slots.tip" side="bottom">
         <template #trigger>
-          <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+          <CircleHelp class="ml-1 size-3 cursor-help" />
         </template>
         <slot name="tip"></slot>
       </VbenTooltip>

packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useSlots } from 'vue';
 
-import { MdiQuestionMarkCircleOutline } from '@vben-core/icons';
+import { CircleHelp } from '@vben-core/icons';
 import { Switch, VbenTooltip } from '@vben-core/shadcn-ui';
 
 defineOptions({
@@ -34,7 +34,7 @@ function handleClick() {
 
       <VbenTooltip v-if="slots.tip" side="bottom">
         <template #trigger>
-          <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+          <CircleHelp class="ml-1 size-3 cursor-help" />
         </template>
         <slot name="tip"></slot>
       </VbenTooltip>

packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue

@@ -3,7 +3,7 @@ import type { BuiltinThemeType } from '@vben-core/typings';
 
 import { computed, ref } from 'vue';
 
-import { MdiEditBoxOutline } from '@vben-core/icons';
+import { UserRoundPen } from '@vben-core/icons';
 import { $t } from '@vben-core/locales';
 import {
   BUILT_IN_THEME_PRESETS,
@@ -114,7 +114,7 @@ function selectColor() {
           <template v-else>
             <div class="size-full px-10 py-2" @click.stop="selectColor">
               <div class="flex-center relative size-5 rounded-sm">
-                <MdiEditBoxOutline
+                <UserRoundPen
                   class="absolute z-10 size-5 opacity-60 group-hover:opacity-100"
                 />
                 <input

packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue

@@ -3,11 +3,7 @@ import type { ThemeModeType } from '@vben-core/typings';
 
 import type { Component } from 'vue';
 
-import {
-  IcRoundMotionPhotosAuto,
-  IcRoundWbSunny,
-  MdiMoonAndStars,
-} from '@vben-core/icons';
+import { MoonStar, Sun, SunMoon } from '@vben-core/icons';
 import { $t } from '@vben-core/locales';
 
 import SwitchItem from '../switch-item.vue';
@@ -23,15 +19,15 @@ const themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu', {
 
 const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
   {
-    icon: IcRoundWbSunny,
+    icon: Sun,
     name: 'light',
   },
   {
-    icon: MdiMoonAndStars,
+    icon: MoonStar,
     name: 'dark',
   },
   {
-    icon: IcRoundMotionPhotosAuto,
+    icon: SunMoon,
     name: 'auto',
   },
 ];