perf: reorganize the icons and reduce the volume

2024-07-17 22:25:27 +08:00
parent cb161eab89
commit 910a3553ac
54 changed files with 341 additions and 404 deletions
--- a/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
+++ b/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>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
+++ b/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>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
+++ b/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>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
+++ b/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>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
+++ b/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>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
+++ b/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
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
+++ b/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',
  },
 ];
--- a/packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue
@@ -13,7 +13,7 @@ import type {

 import { computed, ref } from 'vue';

-import { IcRoundFolderCopy, IcRoundRestartAlt } from '@vben-core/icons';
+import { Copy, RotateCw, SwatchBook } from '@vben-core/icons';
 import { $t, loadLocaleMessages } from '@vben-core/locales';
 import {
  clearPreferencesCache,
@@ -51,7 +51,6 @@ import {
  Theme,
  Widget,
 } from './blocks';
-import IconSetting from './icons/setting.vue';
 import { useOpenPreferences } from './use-open-preferences';

 const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
@@ -225,9 +224,9 @@ async function handleReset() {
      <template #trigger>
        <VbenButton
          :title="$t('preferences.title')"
-          class="bg-primary flex-col-center h-12 w-12 cursor-pointer rounded-l-lg rounded-r-none border-none"
+          class="bg-primary flex-col-center h-10 w-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
        >
-          <IconSetting class="duration-3000 fill-primary-foreground text-2xl" />
+          <SwatchBook class="size-5" />
        </VbenButton>
      </template>
      <template #extra>
@@ -241,7 +240,7 @@ async function handleReset() {
              v-if="diffPreference"
              class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
            ></span>
-            <IcRoundRestartAlt class="size-5" @click="handleReset" />
+            <RotateCw class="size-4" @click="handleReset" />
          </VbenIconButton>
        </div>
      </template>
@@ -408,7 +407,7 @@ async function handleReset() {
          variant="default"
          @click="handleCopy"
        >
-          <IcRoundFolderCopy class="mr-2 size-3" />
+          <Copy class="mr-2 size-3" />
          {{ $t('preferences.copyPreferences') }}
        </VbenButton>
        <VbenButton
@@ -418,7 +417,7 @@ async function handleReset() {
          variant="ghost"
          @click="handleClearCache"
        >
-          <!-- <IcRoundRestartAlt class="mr-2 size-4" /> -->
+          <!-- <RotateCw class="mr-2 size-4" /> -->
          {{ $t('preferences.clearAndLogout') }}
        </VbenButton>
      </template>