perf: update menu icons (#4357)

vbenjs · Sep 11, 2024 · 8f6bf6a · 8f6bf6a
1 parent ceb52aa
commit 8f6bf6a
Show file tree

Hide file tree

Showing 15 changed files with 54 additions and 11 deletions.
diff --git a/apps/web-antd/src/router/routes/modules/dashboard.ts b/apps/web-antd/src/router/routes/modules/dashboard.ts
@@ -29,6 +29,7 @@ const routes: RouteRecordRaw[] = [
         path: '/workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
+          icon: 'carbon:workspace',
           title: $t('page.dashboard.workspace'),
         },
       },

diff --git a/apps/web-antd/src/router/routes/modules/vben.ts b/apps/web-antd/src/router/routes/modules/vben.ts
@@ -58,6 +58,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:naiveui',
           link: VBEN_NAIVE_PREVIEW_URL,
           title: $t('page.vben.naive-ui'),
         },
@@ -68,6 +69,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:element',
           link: VBEN_ELE_PREVIEW_URL,
           title: $t('page.vben.element-plus'),
         },

diff --git a/apps/web-ele/src/router/routes/modules/dashboard.ts b/apps/web-ele/src/router/routes/modules/dashboard.ts
@@ -29,6 +29,7 @@ const routes: RouteRecordRaw[] = [
         path: '/workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
+          icon: 'carbon:workspace',
           title: $t('page.dashboard.workspace'),
         },
       },

diff --git a/apps/web-ele/src/router/routes/modules/vben.ts b/apps/web-ele/src/router/routes/modules/vben.ts
@@ -7,6 +7,7 @@ import {
   VBEN_LOGO_URL,
   VBEN_NAIVE_PREVIEW_URL,
 } from '@vben/constants';
+import { SvgAntdvLogoIcon } from '@vben/icons';
 
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
@@ -58,6 +59,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:naiveui',
           link: VBEN_NAIVE_PREVIEW_URL,
           title: $t('page.vben.naive-ui'),
         },
@@ -68,6 +70,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: SvgAntdvLogoIcon,
           link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },

diff --git a/apps/web-naive/src/router/routes/modules/dashboard.ts b/apps/web-naive/src/router/routes/modules/dashboard.ts
@@ -29,6 +29,7 @@ const routes: RouteRecordRaw[] = [
         path: '/workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
+          icon: 'carbon:workspace',
           title: $t('page.dashboard.workspace'),
         },
       },

diff --git a/apps/web-naive/src/router/routes/modules/vben.ts b/apps/web-naive/src/router/routes/modules/vben.ts
@@ -7,6 +7,7 @@ import {
   VBEN_GITHUB_URL,
   VBEN_LOGO_URL,
 } from '@vben/constants';
+import { SvgAntdvLogoIcon } from '@vben/icons';
 
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
@@ -58,6 +59,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: SvgAntdvLogoIcon,
           link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },
@@ -68,6 +70,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:element',
           link: VBEN_ELE_PREVIEW_URL,
           title: $t('page.vben.element-plus'),
         },

diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue b/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
@@ -113,7 +113,7 @@ onBeforeUnmount(() => {
         class="right-2"
         v-bind="props"
       />
-      <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback />
+      <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" />
       <slot></slot>
       <slot name="title"></slot>
     </div>

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
@@ -31,7 +31,6 @@ function handleClick(path?: string) {
             <span class="flex-center z-10 h-full">
               <VbenIcon
                 v-if="showIcon"
-                :fallback="showIcon"
                 :icon="item.icon"
                 class="mr-1 size-4 flex-shrink-0"
               />

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
@@ -47,12 +47,7 @@ function handleClick(path?: string) {
             <div v-if="item.items?.length ?? 0 > 0">
               <DropdownMenu>
                 <DropdownMenuTrigger class="flex items-center gap-1">
-                  <VbenIcon
-                    v-if="showIcon"
-                    :fallback="showIcon"
-                    :icon="item.icon"
-                    class="size-5"
-                  />
+                  <VbenIcon v-if="showIcon" :icon="item.icon" class="size-5" />
                   {{ item.title }}
                   <ChevronDown class="size-4" />
                 </DropdownMenuTrigger>
@@ -77,7 +72,6 @@ function handleClick(path?: string) {
                 <VbenIcon
                   v-if="showIcon"
                   :class="{ 'size-5': item.isHome }"
-                  :fallback="showIcon"
                   :icon="item.icon"
                   class="mr-1 size-4"
                 />
@@ -89,7 +83,6 @@ function handleClick(path?: string) {
                 <VbenIcon
                   v-if="showIcon"
                   :class="{ 'size-5': item.isHome }"
-                  :fallback="showIcon"
                   :icon="item.icon"
                   class="mr-1 size-4"
                 />

diff --git a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -134,7 +134,6 @@ const tabsView = computed((): TabConfig[] => {
                 v-if="showIcon"
                 :icon="tab.icon"
                 class="mr-1 flex size-4 items-center overflow-hidden"
-                fallback
               />
 
               <span class="flex-1 overflow-hidden whitespace-nowrap text-sm">

diff --git a/packages/icons/src/svg/icons/antdv-logo.svg b/packages/icons/src/svg/icons/antdv-logo.svg
diff --git a/packages/icons/src/svg/index.ts b/packages/icons/src/svg/index.ts
@@ -10,8 +10,10 @@ const SvgDownloadIcon = createIconifyIcon('svg:download');
 const SvgCardIcon = createIconifyIcon('svg:card');
 const SvgBellIcon = createIconifyIcon('svg:bell');
 const SvgCakeIcon = createIconifyIcon('svg:cake');
+const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
 
 export {
+  SvgAntdvLogoIcon,
   SvgAvatar1Icon,
   SvgAvatar2Icon,
   SvgAvatar3Icon,

diff --git a/playground/src/router/routes/modules/dashboard.ts b/playground/src/router/routes/modules/dashboard.ts
@@ -29,6 +29,7 @@ const routes: RouteRecordRaw[] = [
         path: '/workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
+          icon: 'carbon:workspace',
           title: $t('page.dashboard.workspace'),
         },
       },

diff --git a/playground/src/router/routes/modules/examples.ts b/playground/src/router/routes/modules/examples.ts
@@ -20,6 +20,7 @@ const routes: RouteRecordRaw[] = [
         path: '/examples/modal',
         component: () => import('#/views/examples/modal/index.vue'),
         meta: {
+          icon: 'system-uicons:window-content',
           title: $t('page.examples.modal.title'),
         },
       },
@@ -28,6 +29,7 @@ const routes: RouteRecordRaw[] = [
         path: '/examples/drawer',
         component: () => import('#/views/examples/drawer/index.vue'),
         meta: {
+          icon: 'iconoir:drawer',
           title: $t('page.examples.drawer.title'),
         },
       },
@@ -36,6 +38,7 @@ const routes: RouteRecordRaw[] = [
         path: '/examples/ellipsis',
         component: () => import('#/views/examples/ellipsis/index.vue'),
         meta: {
+          icon: 'ion:ellipsis-horizontal',
           title: $t('page.examples.ellipsis.title'),
         },
       },
@@ -44,13 +47,15 @@ const routes: RouteRecordRaw[] = [
         path: '/examples/captcha',
         component: () => import('#/views/examples/captcha/index.vue'),
         meta: {
+          icon: 'logos:recaptcha',
           title: $t('page.examples.captcha.title'),
         },
       },
       {
         name: 'FormExample',
         path: '/examples/form',
         meta: {
+          icon: 'mdi:form-select',
           title: $t('page.examples.form.title'),
         },
         children: [

diff --git a/playground/src/router/routes/modules/vben.ts b/playground/src/router/routes/modules/vben.ts
@@ -8,6 +8,7 @@ import {
   VBEN_LOGO_URL,
   VBEN_NAIVE_PREVIEW_URL,
 } from '@vben/constants';
+import { SvgAntdvLogoIcon } from '@vben/icons';
 
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
@@ -59,6 +60,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: SvgAntdvLogoIcon,
           link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },
@@ -69,6 +71,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:naiveui',
           link: VBEN_NAIVE_PREVIEW_URL,
           title: $t('page.vben.naive-ui'),
         },
@@ -79,6 +82,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:element',
           link: VBEN_ELE_PREVIEW_URL,
           title: $t('page.vben.element-plus'),
         },