perf: update menu icons (#4357)

1 week ago · 8f6bf6add3
15 changed files with 54 additions and 11 deletions
--- 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'),
        },
      },
--- 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'),
        },
--- 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'),
        },
      },
--- 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'),
        },
--- 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'),
        },
      },
--- 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'),
        },
--- 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>
--- 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"
              />
--- 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"
                />
--- 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">
--- a/packages/icons/src/svg/icons/antdv-logo.svg
+++ b/packages/icons/src/svg/icons/antdv-logo.svg
@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+    <title>Vue</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="69.644116%" y1="0%" x2="69.644116%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#29CDFF" offset="0%"></stop>
+            <stop stop-color="#148EFF" offset="37.8600687%"></stop>
+            <stop stop-color="#0A60FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-19.8191553%" y1="-36.7931464%" x2="138.57919%" y2="157.637507%" id="linearGradient-2">
+            <stop stop-color="#29CDFF" offset="0%"></stop>
+            <stop stop-color="#0F78FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-3">
+            <stop stop-color="#FA8E7D" offset="0%"></stop>
+            <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
+            <stop stop-color="#F51D2C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(19.000000, 9.000000)">
+            <path d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281" id="Path-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "></path>
+            <path d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561" id="Path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+            <path d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z" id="Path" fill="url(#linearGradient-3)"></path>
+        </g>
+    </g>
+</svg>
--- 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,
--- 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'),
        },
      },
--- 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,6 +47,7 @@ const routes: RouteRecordRaw[] = [
        path: '/examples/captcha',
        component: () => import('#/views/examples/captcha/index.vue'),
        meta: {
+          icon: 'logos:recaptcha',
          title: $t('page.examples.captcha.title'),
        },
      },
@ -51,6 +55,7 @@ const routes: RouteRecordRaw[] = [
        name: 'FormExample',
        path: '/examples/form',
        meta: {
+          icon: 'mdi:form-select',
          title: $t('page.examples.form.title'),
        },
        children: [
--- 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'),
        },