perf: 优化使用离线图标后运行慢问题

2024-06-05 16:26:46 +08:00 · 2024-06-05 16:26:46 +08:00 · 7e9c4a6109
parent 4b43c87949
commit 7e9c4a6109
39 changed files with 2466 additions and 2412 deletions
--- a/.env.base
+++ b/.env.base
@ -17,4 +17,4 @@ VITE_USE_ALL_ELEMENT_PLUS_STYLE=true
 VITE_USE_MOCK=true

 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=true
--- a/.env.dev
+++ b/.env.dev
@ -35,4 +35,4 @@ VITE_USE_MOCK=true
 VITE_USE_CSS_SPLIT=true

 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=true
--- a/.env.gitee
+++ b/.env.gitee
@ -35,4 +35,4 @@ VITE_USE_MOCK=true
 VITE_USE_CSS_SPLIT=true

 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=true
--- a/.env.pro
+++ b/.env.pro
@ -35,4 +35,4 @@ VITE_USE_MOCK=true
 VITE_USE_CSS_SPLIT=true

 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=false
+VITE_USE_ONLINE_ICON=false
--- a/.env.test
+++ b/.env.test
@ -35,4 +35,4 @@ VITE_USE_MOCK=true
 VITE_USE_CSS_SPLIT=false

 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=true
--- a/mock/menu/index.mock.ts
+++ b/mock/menu/index.mock.ts
@ -26,7 +26,7 @@ export default [
              title: '首页',
              meta: {
                title: '首页',
-                icon: 'ant-design:dashboard-filled',
+                icon: 'vi-ant-design:dashboard-filled',
                alwaysShow: true
              },
              children: [
@ -90,7 +90,7 @@ export default [
              component: '#',
              meta: {
                title: '文档',
-                icon: 'clarity:document-solid'
+                icon: 'vi-clarity:document-solid'
              },
              name: 'ExternalLink',
              status: Mock.Random.integer(0, 1),
@ -125,7 +125,7 @@ export default [
              title: '菜单',
              meta: {
                title: '菜单',
-                icon: 'carbon:skill-level-advanced'
+                icon: 'vi-carbon:skill-level-advanced'
              },
              children: [
                {
@ -214,7 +214,7 @@ export default [
              title: '综合示例',
              meta: {
                title: '综合示例',
-                icon: 'ep:management',
+                icon: 'vi-ep:management',
                alwaysShow: true
              },
              children: [
--- a/mock/role/index.mock.ts
+++ b/mock/role/index.mock.ts
@ -12,7 +12,7 @@ const adminList = [
    name: 'Dashboard',
    meta: {
      title: 'router.dashboard',
-      icon: 'ant-design:dashboard-filled',
+      icon: 'vi-ant-design:dashboard-filled',
      alwaysShow: true
    },
    children: [
@ -49,7 +49,7 @@ const adminList = [
        name: 'DocumentLink',
        meta: {
          title: 'router.document',
-          icon: 'clarity:document-solid'
+          icon: 'vi-clarity:document-solid'
        }
      }
    ]
@ -66,7 +66,7 @@ const adminList = [
        name: 'GuideDemo',
        meta: {
          title: 'router.guide',
-          icon: 'cib:telegram-plane'
+          icon: 'vi-cib:telegram-plane'
        }
      }
    ]
@ -78,7 +78,7 @@ const adminList = [
    name: 'ComponentsDemo',
    meta: {
      title: 'router.component',
-      icon: 'bx:bxs-component',
+      icon: 'vi-bx:bxs-component',
      alwaysShow: true
    },
    children: [
@ -358,7 +358,7 @@ const adminList = [
    name: 'Function',
    meta: {
      title: 'router.function',
-      icon: 'ri:function-fill',
+      icon: 'vi-ri:function-fill',
      alwaysShow: true
    },
    children: [
@ -406,7 +406,7 @@ const adminList = [
    name: 'Hooks',
    meta: {
      title: 'hooks',
-      icon: 'ic:outline-webhook',
+      icon: 'vi-ic:outline-webhook',
      alwaysShow: true
    },
    children: [
@ -467,7 +467,7 @@ const adminList = [
    name: 'Level',
    meta: {
      title: 'router.level',
-      icon: 'carbon:skill-level-advanced'
+      icon: 'vi-carbon:skill-level-advanced'
    },
    children: [
      {
@ -526,7 +526,7 @@ const adminList = [
    name: 'Example',
    meta: {
      title: 'router.example',
-      icon: 'ep:management',
+      icon: 'vi-ep:management',
      alwaysShow: true
    },
    children: [
@ -594,7 +594,7 @@ const adminList = [
    name: 'Error',
    meta: {
      title: 'router.errorPage',
-      icon: 'ci:error',
+      icon: 'vi-ci:error',
      alwaysShow: true
    },
    children: [
@ -631,7 +631,7 @@ const adminList = [
    name: 'Authorization',
    meta: {
      title: 'router.authorization',
-      icon: 'eos-icons:role-binding',
+      icon: 'vi-eos-icons:role-binding',
      alwaysShow: true
    },
    children: [
@ -762,7 +762,7 @@ const menus = [
      id: 1,
      meta: {
        title: '首页',
-        icon: 'ant-design:dashboard-filled',
+        icon: 'vi-ant-design:dashboard-filled',
        alwaysShow: true
      },
      children: [
@ -795,7 +795,7 @@ const menus = [
      component: '#',
      meta: {
        title: '文档',
-        icon: 'clarity:document-solid'
+        icon: 'vi-clarity:document-solid'
      },
      name: 'ExternalLink',
      status: Mock.Random.integer(0, 1),
@ -821,7 +821,7 @@ const menus = [
      id: 6,
      meta: {
        title: '菜单',
-        icon: 'carbon:skill-level-advanced'
+        icon: 'vi-carbon:skill-level-advanced'
      },
      children: [
        {
@ -898,7 +898,7 @@ const menus = [
      id: 12,
      meta: {
        title: '综合示例',
-        icon: 'ep:management',
+        icon: 'vi-ep:management',
        alwaysShow: true
      },
      children: [
@ -990,7 +990,7 @@ const menus = [
      id: 1,
      meta: {
        title: '首页',
-        icon: 'ant-design:dashboard-filled',
+        icon: 'vi-ant-design:dashboard-filled',
        alwaysShow: true
      },
      children: [
@ -1025,7 +1025,7 @@ const menus = [
      component: '#',
      meta: {
        title: '文档',
-        icon: 'clarity:document-solid'
+        icon: 'vi-clarity:document-solid'
      },
      name: 'ExternalLink',
      status: Mock.Random.integer(0, 1),
@ -1051,7 +1051,7 @@ const menus = [
      id: 6,
      meta: {
        title: '菜单',
-        icon: 'carbon:skill-level-advanced'
+        icon: 'vi-carbon:skill-level-advanced'
      },
      children: [
        {
@ -1130,7 +1130,7 @@ const menus = [
      id: 12,
      meta: {
        title: '综合示例',
-        icon: 'ep:management',
+        icon: 'vi-ep:management',
        alwaysShow: true
      },
      children: [
--- a/scripts/icon.ts
+++ b/scripts/icon.ts
@ -3,6 +3,7 @@ import fs from 'fs-extra'
 import inquirer from 'inquirer'
 import chalk from 'chalk'
 import pkg from '../package.json'
+import { ICON_PREFIX } from '../src/constants'

 interface Icon {
  name: string
@ -52,11 +53,12 @@ async function generateIcon() {
        const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`))
        if (data) {
          const { prefix } = data
-          const icons = Object.keys(data.icons).map((item) => `${prefix}:${item}`)
+          const prefixName = `${ICON_PREFIX}${prefix}`
+          const icons = Object.keys(data.icons).map((item) => `${prefixName}:${item}`)

          await fs.writeFileSync(
            path.join('src/components/IconPicker/src/data', `icons.${prefix}.ts`),
-            `export default ${JSON.stringify({ name: info.name, prefix, icons })}`
+            `export default ${JSON.stringify({ name: info.name, prefix: prefixName, icons })}`
          )
          // ↓分类处理完成，push类型名称
          prefixSet.push(prefix)
--- a/src/components/Collapse/src/Collapse.vue
+++ b/src/components/Collapse/src/Collapse.vue
@ -26,7 +26,7 @@ const toggleCollapse = () => {
  <div :class="prefixCls" @click="toggleCollapse">
    <Icon
      :size="18"
-      :icon="collapse ? 'ant-design:menu-unfold-outlined' : 'ant-design:menu-fold-outlined'"
+      :icon="collapse ? 'vi-ant-design:menu-unfold-outlined' : 'vi-ant-design:menu-fold-outlined'"
      :color="color"
      class="cursor-pointer"
    />
--- a/src/components/ContentWrap/src/ContentWrap.vue
+++ b/src/components/ContentWrap/src/ContentWrap.vue
@ -22,7 +22,7 @@ defineProps({
          <template #content>
            <div class="max-w-200px">{{ message }}</div>
          </template>
-          <Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
+          <Icon class="ml-5px" icon="vi-bi:question-circle-fill" :size="14" />
        </ElTooltip>
        <div class="flex pl-20px flex-grow">
          <slot name="header"></slot>
--- a/src/components/Descriptions/src/Descriptions.vue
+++ b/src/components/Descriptions/src/Descriptions.vue
@ -97,12 +97,14 @@ export default defineComponent({
                  {props.title}
                  {props.message ? (
                    <ElTooltip content={props.message} placement="right">
-                      <Icon icon="bi:question-circle-fill" class="ml-5px" size={14} />
+                      <Icon icon="vi-bi:question-circle-fill" class="ml-5px" size={14} />
                    </ElTooltip>
                  ) : null}
                </div>
              </div>
-              {props.collapse ? <Icon icon={show.value ? 'ep:arrow-down' : 'ep:arrow-up'} /> : null}
+              {props.collapse ? (
+                <Icon icon={show.value ? 'vi-ep:arrow-down' : 'vi-ep:arrow-up'} />
+              ) : null}
            </div>
          ) : null}

--- a/src/components/Dialog/src/Dialog.vue
+++ b/src/components/Dialog/src/Dialog.vue
@ -78,14 +78,16 @@ const dialogStyle = computed(() => {
          <Icon
            v-if="fullscreen"
            class="cursor-pointer is-hover !h-54px mr-10px"
-            :icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'"
+            :icon="
+              isFullscreen ? 'vi-radix-icons:exit-full-screen' : 'vi-radix-icons:enter-full-screen'
+            "
            color="var(--el-color-info)"
            hover-color="var(--el-color-primary)"
            @click="toggleFull"
          />
          <Icon
            class="cursor-pointer is-hover !h-54px"
-            icon="ep:close"
+            icon="vi-ep:close"
            hover-color="var(--el-color-primary)"
            color="var(--el-color-info)"
            @click="close"
--- a/src/components/Icon/src/Icon.vue
+++ b/src/components/Icon/src/Icon.vue
@ -4,6 +4,7 @@ import { ElIcon } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 import { Icon } from '@iconify/vue'
+import { ICON_PREFIX } from '@/constants'

 const { getPrefixCls } = useDesign()

@ -37,6 +38,10 @@ const getIconifyStyle = computed(() => {
    color
  }
 })
+
+const getIconName = computed(() => {
+  return props.icon.startsWith(ICON_PREFIX) ? props.icon.replace(ICON_PREFIX, '') : props.icon
+})
 </script>

 <template>
@ -46,7 +51,7 @@ const getIconifyStyle = computed(() => {
    </svg>

    <template v-else>
-      <Icon v-if="isUseOnline" :icon="icon" :style="getIconifyStyle" />
+      <Icon v-if="isUseOnline" :icon="getIconName" :style="getIconifyStyle" />
      <div v-else :class="`${icon} iconify`" :style="getIconifyStyle"></div>
    </template>
  </ElIcon>
--- a/src/components/IconPicker/src/data/icons.ant-design.ts
+++ b/src/components/IconPicker/src/data/icons.ant-design.ts
--- a/src/components/IconPicker/src/data/icons.ep.ts
+++ b/src/components/IconPicker/src/data/icons.ep.ts
@ -1,299 +1,299 @@
 export default {
  name: 'Element Plus',
-  prefix: 'ep',
+  prefix: 'vi-ep',
  icons: [
-    'ep:add-location',
-    'ep:aim',
-    'ep:alarm-clock',
-    'ep:apple',
-    'ep:arrow-down',
-    'ep:arrow-down-bold',
-    'ep:arrow-left',
-    'ep:arrow-left-bold',
-    'ep:arrow-right',
-    'ep:arrow-right-bold',
-    'ep:arrow-up',
-    'ep:arrow-up-bold',
-    'ep:avatar',
-    'ep:back',
-    'ep:baseball',
-    'ep:basketball',
-    'ep:bell',
-    'ep:bell-filled',
-    'ep:bicycle',
-    'ep:bottom',
-    'ep:bottom-left',
-    'ep:bottom-right',
-    'ep:bowl',
-    'ep:box',
-    'ep:briefcase',
-    'ep:brush',
-    'ep:brush-filled',
-    'ep:burger',
-    'ep:calendar',
-    'ep:camera',
-    'ep:camera-filled',
-    'ep:caret-bottom',
-    'ep:caret-left',
-    'ep:caret-right',
-    'ep:caret-top',
-    'ep:cellphone',
-    'ep:chat-dot-round',
-    'ep:chat-dot-square',
-    'ep:chat-line-round',
-    'ep:chat-line-square',
-    'ep:chat-round',
-    'ep:chat-square',
-    'ep:check',
-    'ep:checked',
-    'ep:cherry',
-    'ep:chicken',
-    'ep:chrome-filled',
-    'ep:circle-check',
-    'ep:circle-check-filled',
-    'ep:circle-close',
-    'ep:circle-close-filled',
-    'ep:circle-plus',
-    'ep:circle-plus-filled',
-    'ep:clock',
-    'ep:close',
-    'ep:close-bold',
-    'ep:cloudy',
-    'ep:coffee',
-    'ep:coffee-cup',
-    'ep:coin',
-    'ep:cold-drink',
-    'ep:collection',
-    'ep:collection-tag',
-    'ep:comment',
-    'ep:compass',
-    'ep:connection',
-    'ep:coordinate',
-    'ep:copy-document',
-    'ep:cpu',
-    'ep:credit-card',
-    'ep:crop',
-    'ep:d-arrow-left',
-    'ep:d-arrow-right',
-    'ep:d-caret',
-    'ep:data-analysis',
-    'ep:data-board',
-    'ep:data-line',
-    'ep:delete',
-    'ep:delete-filled',
-    'ep:delete-location',
-    'ep:dessert',
-    'ep:discount',
-    'ep:dish',
-    'ep:dish-dot',
-    'ep:document',
-    'ep:document-add',
-    'ep:document-checked',
-    'ep:document-copy',
-    'ep:document-delete',
-    'ep:document-remove',
-    'ep:download',
-    'ep:drizzling',
-    'ep:edit',
-    'ep:edit-pen',
-    'ep:eleme',
-    'ep:eleme-filled',
-    'ep:element-plus',
-    'ep:expand',
-    'ep:failed',
-    'ep:female',
-    'ep:files',
-    'ep:film',
-    'ep:filter',
-    'ep:finished',
-    'ep:first-aid-kit',
-    'ep:flag',
-    'ep:fold',
-    'ep:folder',
-    'ep:folder-add',
-    'ep:folder-checked',
-    'ep:folder-delete',
-    'ep:folder-opened',
-    'ep:folder-remove',
-    'ep:food',
-    'ep:football',
-    'ep:fork-spoon',
-    'ep:fries',
-    'ep:full-screen',
-    'ep:goblet',
-    'ep:goblet-full',
-    'ep:goblet-square',
-    'ep:goblet-square-full',
-    'ep:gold-medal',
-    'ep:goods',
-    'ep:goods-filled',
-    'ep:grape',
-    'ep:grid',
-    'ep:guide',
-    'ep:handbag',
-    'ep:headset',
-    'ep:help',
-    'ep:help-filled',
-    'ep:hide',
-    'ep:histogram',
-    'ep:home-filled',
-    'ep:hot-water',
-    'ep:house',
-    'ep:ice-cream',
-    'ep:ice-cream-round',
-    'ep:ice-cream-square',
-    'ep:ice-drink',
-    'ep:ice-tea',
-    'ep:info-filled',
-    'ep:iphone',
-    'ep:key',
-    'ep:knife-fork',
-    'ep:lightning',
-    'ep:link',
-    'ep:list',
-    'ep:loading',
-    'ep:location',
-    'ep:location-filled',
-    'ep:location-information',
-    'ep:lock',
-    'ep:lollipop',
-    'ep:magic-stick',
-    'ep:magnet',
-    'ep:male',
-    'ep:management',
-    'ep:map-location',
-    'ep:medal',
-    'ep:memo',
-    'ep:menu',
-    'ep:message',
-    'ep:message-box',
-    'ep:mic',
-    'ep:microphone',
-    'ep:milk-tea',
-    'ep:minus',
-    'ep:money',
-    'ep:monitor',
-    'ep:moon',
-    'ep:moon-night',
-    'ep:more',
-    'ep:more-filled',
-    'ep:mostly-cloudy',
-    'ep:mouse',
-    'ep:mug',
-    'ep:mute',
-    'ep:mute-notification',
-    'ep:no-smoking',
-    'ep:notebook',
-    'ep:notification',
-    'ep:odometer',
-    'ep:office-building',
-    'ep:open',
-    'ep:operation',
-    'ep:opportunity',
-    'ep:orange',
-    'ep:paperclip',
-    'ep:partly-cloudy',
-    'ep:pear',
-    'ep:phone',
-    'ep:phone-filled',
-    'ep:picture',
-    'ep:picture-filled',
-    'ep:picture-rounded',
-    'ep:pie-chart',
-    'ep:place',
-    'ep:platform',
-    'ep:plus',
-    'ep:pointer',
-    'ep:position',
-    'ep:postcard',
-    'ep:pouring',
-    'ep:present',
-    'ep:price-tag',
-    'ep:printer',
-    'ep:promotion',
-    'ep:quartz-watch',
-    'ep:question-filled',
-    'ep:rank',
-    'ep:reading',
-    'ep:reading-lamp',
-    'ep:refresh',
-    'ep:refresh-left',
-    'ep:refresh-right',
-    'ep:refrigerator',
-    'ep:remove',
-    'ep:remove-filled',
-    'ep:right',
-    'ep:scale-to-original',
-    'ep:school',
-    'ep:scissor',
-    'ep:search',
-    'ep:select',
-    'ep:sell',
-    'ep:semi-select',
-    'ep:service',
-    'ep:set-up',
-    'ep:setting',
-    'ep:share',
-    'ep:ship',
-    'ep:shop',
-    'ep:shopping-bag',
-    'ep:shopping-cart',
-    'ep:shopping-cart-full',
-    'ep:shopping-trolley',
-    'ep:smoking',
-    'ep:soccer',
-    'ep:sold-out',
-    'ep:sort',
-    'ep:sort-down',
-    'ep:sort-up',
-    'ep:stamp',
-    'ep:star',
-    'ep:star-filled',
-    'ep:stopwatch',
-    'ep:success-filled',
-    'ep:sugar',
-    'ep:suitcase',
-    'ep:suitcase-line',
-    'ep:sunny',
-    'ep:sunrise',
-    'ep:sunset',
-    'ep:switch',
-    'ep:switch-button',
-    'ep:switch-filled',
-    'ep:takeaway-box',
-    'ep:ticket',
-    'ep:tickets',
-    'ep:timer',
-    'ep:toilet-paper',
-    'ep:tools',
-    'ep:top',
-    'ep:top-left',
-    'ep:top-right',
-    'ep:trend-charts',
-    'ep:trophy',
-    'ep:trophy-base',
-    'ep:turn-off',
-    'ep:umbrella',
-    'ep:unlock',
-    'ep:upload',
-    'ep:upload-filled',
-    'ep:user',
-    'ep:user-filled',
-    'ep:van',
-    'ep:video-camera',
-    'ep:video-camera-filled',
-    'ep:video-pause',
-    'ep:video-play',
-    'ep:view',
-    'ep:wallet',
-    'ep:wallet-filled',
-    'ep:warn-triangle-filled',
-    'ep:warning',
-    'ep:warning-filled',
-    'ep:watch',
-    'ep:watermelon',
-    'ep:wind-power',
-    'ep:zoom-in',
-    'ep:zoom-out'
+    'vi-ep:add-location',
+    'vi-ep:aim',
+    'vi-ep:alarm-clock',
+    'vi-ep:apple',
+    'vi-ep:arrow-down',
+    'vi-ep:arrow-down-bold',
+    'vi-ep:arrow-left',
+    'vi-ep:arrow-left-bold',
+    'vi-ep:arrow-right',
+    'vi-ep:arrow-right-bold',
+    'vi-ep:arrow-up',
+    'vi-ep:arrow-up-bold',
+    'vi-ep:avatar',
+    'vi-ep:back',
+    'vi-ep:baseball',
+    'vi-ep:basketball',
+    'vi-ep:bell',
+    'vi-ep:bell-filled',
+    'vi-ep:bicycle',
+    'vi-ep:bottom',
+    'vi-ep:bottom-left',
+    'vi-ep:bottom-right',
+    'vi-ep:bowl',
+    'vi-ep:box',
+    'vi-ep:briefcase',
+    'vi-ep:brush',
+    'vi-ep:brush-filled',
+    'vi-ep:burger',
+    'vi-ep:calendar',
+    'vi-ep:camera',
+    'vi-ep:camera-filled',
+    'vi-ep:caret-bottom',
+    'vi-ep:caret-left',
+    'vi-ep:caret-right',
+    'vi-ep:caret-top',
+    'vi-ep:cellphone',
+    'vi-ep:chat-dot-round',
+    'vi-ep:chat-dot-square',
+    'vi-ep:chat-line-round',
+    'vi-ep:chat-line-square',
+    'vi-ep:chat-round',
+    'vi-ep:chat-square',
+    'vi-ep:check',
+    'vi-ep:checked',
+    'vi-ep:cherry',
+    'vi-ep:chicken',
+    'vi-ep:chrome-filled',
+    'vi-ep:circle-check',
+    'vi-ep:circle-check-filled',
+    'vi-ep:circle-close',
+    'vi-ep:circle-close-filled',
+    'vi-ep:circle-plus',
+    'vi-ep:circle-plus-filled',
+    'vi-ep:clock',
+    'vi-ep:close',
+    'vi-ep:close-bold',
+    'vi-ep:cloudy',
+    'vi-ep:coffee',
+    'vi-ep:coffee-cup',
+    'vi-ep:coin',
+    'vi-ep:cold-drink',
+    'vi-ep:collection',
+    'vi-ep:collection-tag',
+    'vi-ep:comment',
+    'vi-ep:compass',
+    'vi-ep:connection',
+    'vi-ep:coordinate',
+    'vi-ep:copy-document',
+    'vi-ep:cpu',
+    'vi-ep:credit-card',
+    'vi-ep:crop',
+    'vi-ep:d-arrow-left',
+    'vi-ep:d-arrow-right',
+    'vi-ep:d-caret',
+    'vi-ep:data-analysis',
+    'vi-ep:data-board',
+    'vi-ep:data-line',
+    'vi-ep:delete',
+    'vi-ep:delete-filled',
+    'vi-ep:delete-location',
+    'vi-ep:dessert',
+    'vi-ep:discount',
+    'vi-ep:dish',
+    'vi-ep:dish-dot',
+    'vi-ep:document',
+    'vi-ep:document-add',
+    'vi-ep:document-checked',
+    'vi-ep:document-copy',
+    'vi-ep:document-delete',
+    'vi-ep:document-remove',
+    'vi-ep:download',
+    'vi-ep:drizzling',
+    'vi-ep:edit',
+    'vi-ep:edit-pen',
+    'vi-ep:eleme',
+    'vi-ep:eleme-filled',
+    'vi-ep:element-plus',
+    'vi-ep:expand',
+    'vi-ep:failed',
+    'vi-ep:female',
+    'vi-ep:files',
+    'vi-ep:film',
+    'vi-ep:filter',
+    'vi-ep:finished',
+    'vi-ep:first-aid-kit',
+    'vi-ep:flag',
+    'vi-ep:fold',
+    'vi-ep:folder',
+    'vi-ep:folder-add',
+    'vi-ep:folder-checked',
+    'vi-ep:folder-delete',
+    'vi-ep:folder-opened',
+    'vi-ep:folder-remove',
+    'vi-ep:food',
+    'vi-ep:football',
+    'vi-ep:fork-spoon',
+    'vi-ep:fries',
+    'vi-ep:full-screen',
+    'vi-ep:goblet',
+    'vi-ep:goblet-full',
+    'vi-ep:goblet-square',
+    'vi-ep:goblet-square-full',
+    'vi-ep:gold-medal',
+    'vi-ep:goods',
+    'vi-ep:goods-filled',
+    'vi-ep:grape',
+    'vi-ep:grid',
+    'vi-ep:guide',
+    'vi-ep:handbag',
+    'vi-ep:headset',
+    'vi-ep:help',
+    'vi-ep:help-filled',
+    'vi-ep:hide',
+    'vi-ep:histogram',
+    'vi-ep:home-filled',
+    'vi-ep:hot-water',
+    'vi-ep:house',
+    'vi-ep:ice-cream',
+    'vi-ep:ice-cream-round',
+    'vi-ep:ice-cream-square',
+    'vi-ep:ice-drink',
+    'vi-ep:ice-tea',
+    'vi-ep:info-filled',
+    'vi-ep:iphone',
+    'vi-ep:key',
+    'vi-ep:knife-fork',
+    'vi-ep:lightning',
+    'vi-ep:link',
+    'vi-ep:list',
+    'vi-ep:loading',
+    'vi-ep:location',
+    'vi-ep:location-filled',
+    'vi-ep:location-information',
+    'vi-ep:lock',
+    'vi-ep:lollipop',
+    'vi-ep:magic-stick',
+    'vi-ep:magnet',
+    'vi-ep:male',
+    'vi-ep:management',
+    'vi-ep:map-location',
+    'vi-ep:medal',
+    'vi-ep:memo',
+    'vi-ep:menu',
+    'vi-ep:message',
+    'vi-ep:message-box',
+    'vi-ep:mic',
+    'vi-ep:microphone',
+    'vi-ep:milk-tea',
+    'vi-ep:minus',
+    'vi-ep:money',
+    'vi-ep:monitor',
+    'vi-ep:moon',
+    'vi-ep:moon-night',
+    'vi-ep:more',
+    'vi-ep:more-filled',
+    'vi-ep:mostly-cloudy',
+    'vi-ep:mouse',
+    'vi-ep:mug',
+    'vi-ep:mute',
+    'vi-ep:mute-notification',
+    'vi-ep:no-smoking',
+    'vi-ep:notebook',
+    'vi-ep:notification',
+    'vi-ep:odometer',
+    'vi-ep:office-building',
+    'vi-ep:open',
+    'vi-ep:operation',
+    'vi-ep:opportunity',
+    'vi-ep:orange',
+    'vi-ep:paperclip',
+    'vi-ep:partly-cloudy',
+    'vi-ep:pear',
+    'vi-ep:phone',
+    'vi-ep:phone-filled',
+    'vi-ep:picture',
+    'vi-ep:picture-filled',
+    'vi-ep:picture-rounded',
+    'vi-ep:pie-chart',
+    'vi-ep:place',
+    'vi-ep:platform',
+    'vi-ep:plus',
+    'vi-ep:pointer',
+    'vi-ep:position',
+    'vi-ep:postcard',
+    'vi-ep:pouring',
+    'vi-ep:present',
+    'vi-ep:price-tag',
+    'vi-ep:printer',
+    'vi-ep:promotion',
+    'vi-ep:quartz-watch',
+    'vi-ep:question-filled',
+    'vi-ep:rank',
+    'vi-ep:reading',
+    'vi-ep:reading-lamp',
+    'vi-ep:refresh',
+    'vi-ep:refresh-left',
+    'vi-ep:refresh-right',
+    'vi-ep:refrigerator',
+    'vi-ep:remove',
+    'vi-ep:remove-filled',
+    'vi-ep:right',
+    'vi-ep:scale-to-original',
+    'vi-ep:school',
+    'vi-ep:scissor',
+    'vi-ep:search',
+    'vi-ep:select',
+    'vi-ep:sell',
+    'vi-ep:semi-select',
+    'vi-ep:service',
+    'vi-ep:set-up',
+    'vi-ep:setting',
+    'vi-ep:share',
+    'vi-ep:ship',
+    'vi-ep:shop',
+    'vi-ep:shopping-bag',
+    'vi-ep:shopping-cart',
+    'vi-ep:shopping-cart-full',
+    'vi-ep:shopping-trolley',
+    'vi-ep:smoking',
+    'vi-ep:soccer',
+    'vi-ep:sold-out',
+    'vi-ep:sort',
+    'vi-ep:sort-down',
+    'vi-ep:sort-up',
+    'vi-ep:stamp',
+    'vi-ep:star',
+    'vi-ep:star-filled',
+    'vi-ep:stopwatch',
+    'vi-ep:success-filled',
+    'vi-ep:sugar',
+    'vi-ep:suitcase',
+    'vi-ep:suitcase-line',
+    'vi-ep:sunny',
+    'vi-ep:sunrise',
+    'vi-ep:sunset',
+    'vi-ep:switch',
+    'vi-ep:switch-button',
+    'vi-ep:switch-filled',
+    'vi-ep:takeaway-box',
+    'vi-ep:ticket',
+    'vi-ep:tickets',
+    'vi-ep:timer',
+    'vi-ep:toilet-paper',
+    'vi-ep:tools',
+    'vi-ep:top',
+    'vi-ep:top-left',
+    'vi-ep:top-right',
+    'vi-ep:trend-charts',
+    'vi-ep:trophy',
+    'vi-ep:trophy-base',
+    'vi-ep:turn-off',
+    'vi-ep:umbrella',
+    'vi-ep:unlock',
+    'vi-ep:upload',
+    'vi-ep:upload-filled',
+    'vi-ep:user',
+    'vi-ep:user-filled',
+    'vi-ep:van',
+    'vi-ep:video-camera',
+    'vi-ep:video-camera-filled',
+    'vi-ep:video-pause',
+    'vi-ep:video-play',
+    'vi-ep:view',
+    'vi-ep:wallet',
+    'vi-ep:wallet-filled',
+    'vi-ep:warn-triangle-filled',
+    'vi-ep:warning',
+    'vi-ep:warning-filled',
+    'vi-ep:watch',
+    'vi-ep:watermelon',
+    'vi-ep:wind-power',
+    'vi-ep:zoom-in',
+    'vi-ep:zoom-out'
  ]
 }
--- a/src/components/IconPicker/src/data/icons.tdesign.ts
+++ b/src/components/IconPicker/src/data/icons.tdesign.ts
--- a/src/components/ImageCropping/src/ImageCropping.vue
+++ b/src/components/ImageCropping/src/ImageCropping.vue
@ -199,7 +199,7 @@ defineExpose({
              :on-change="uploadChange"
            >
              <BaseButton size="small" type="primary" class="mt-2px"
-                ><Icon icon="ep:upload-filled"
+                ><Icon icon="vi-ep:upload-filled"
              /></BaseButton>
            </ElUpload>
          </ElTooltip>
@ -207,37 +207,37 @@ defineExpose({
        <div class="flex items-center justify-end flex-1">
          <ElTooltip content="重置" placement="bottom">
            <BaseButton size="small" type="primary" @click="reset"
-              ><Icon icon="ep:refresh"
+              ><Icon icon="vi-ep:refresh"
            /></BaseButton>
          </ElTooltip>
          <ElTooltip content="逆时针旋转" placement="bottom">
            <BaseButton size="small" type="primary" @click="rotate(-45)"
-              ><Icon icon="ant-design:rotate-left-outlined"
+              ><Icon icon="vi-ant-design:rotate-left-outlined"
            /></BaseButton>
          </ElTooltip>
          <ElTooltip content="顺时针旋转" placement="bottom">
            <BaseButton size="small" type="primary" @click="rotate(45)"
-              ><Icon icon="ant-design:rotate-right-outlined"
+              ><Icon icon="vi-ant-design:rotate-right-outlined"
            /></BaseButton>
          </ElTooltip>
          <ElTooltip content="水平翻转" placement="bottom">
            <BaseButton size="small" type="primary" @click="scale('scaleX')"
-              ><Icon icon="vaadin:arrows-long-h"
+              ><Icon icon="vi-vaadin:arrows-long-h"
            /></BaseButton>
          </ElTooltip>
          <ElTooltip content="垂直翻转" placement="bottom">
            <BaseButton size="small" type="primary" @click="scale('scaleY')"
-              ><Icon icon="vaadin:arrows-long-v"
+              ><Icon icon="vi-vaadin:arrows-long-v"
            /></BaseButton>
          </ElTooltip>
          <ElTooltip content="放大" placement="bottom">
            <BaseButton size="small" type="primary" @click="zoom(0.1)"
-              ><Icon icon="ant-design:zoom-in-outlined"
+              ><Icon icon="vi-ant-design:zoom-in-outlined"
            /></BaseButton>
          </ElTooltip>
          <ElTooltip content="缩小" placement="bottom">
            <BaseButton size="small" type="primary" @click="zoom(-0.1)"
-              ><Icon icon="ant-design:zoom-out-outlined"
+              ><Icon icon="vi-ant-design:zoom-out-outlined"
            /></BaseButton>
          </ElTooltip>
        </div>
--- a/src/components/Infotip/src/Infotip.vue
+++ b/src/components/Infotip/src/Infotip.vue
@ -35,7 +35,7 @@ const keyClick = (key: string) => {
    ]"
  >
    <div v-if="title" :class="[`${prefixCls}__header`, 'flex items-center']">
-      <Icon icon="bi:exclamation-circle-fill" :size="22" color="var(--el-color-primary)" />
+      <Icon icon="vi-bi:exclamation-circle-fill" :size="22" color="var(--el-color-primary)" />
      <span :class="[`${prefixCls}__title`, 'pl-5px text-16px font-bold']">{{ title }}</span>
    </div>
    <div :class="`${prefixCls}__content`">
--- a/src/components/LocaleDropdown/src/LocaleDropdown.vue
+++ b/src/components/LocaleDropdown/src/LocaleDropdown.vue
@ -36,7 +36,7 @@ const setLang = (lang: LocaleType) => {
  <ElDropdown :class="prefixCls" trigger="click" @command="setLang">
    <Icon
      :size="18"
-      icon="ion:language-sharp"
+      icon="vi-ion:language-sharp"
      class="cursor-pointer !p-0"
      :class="$attrs.class"
      :color="color"
--- a/src/components/Qrcode/src/Qrcode.vue
+++ b/src/components/Qrcode/src/Qrcode.vue
@ -230,7 +230,7 @@ const disabledClick = () => {
      @click="disabledClick"
    >
      <div class="absolute top-[50%] left-[50%] font-bold">
-        <Icon icon="ep:refresh-right" :size="30" color="var(--el-color-primary)" />
+        <Icon icon="vi-ep:refresh-right" :size="30" color="var(--el-color-primary)" />
        <div>{{ disabledText }}</div>
      </div>
    </div>
--- a/src/components/Screenfull/src/Screenfull.vue
+++ b/src/components/Screenfull/src/Screenfull.vue
@ -23,7 +23,7 @@ const toggleFullscreen = () => {
  <div :class="prefixCls" @click="toggleFullscreen">
    <Icon
      :size="18"
-      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
+      :icon="isFullscreen ? 'vi-zmdi:fullscreen-exit' : 'vi-zmdi:fullscreen'"
      :color="color"
    />
  </div>
--- a/src/components/Search/src/components/ActionButton.vue
+++ b/src/components/Search/src/components/ActionButton.vue
@ -34,7 +34,7 @@ const onExpand = () => {
    v-if="showSearch"
    type="primary"
    :loading="searchLoading"
-    :icon="useIcon({ icon: 'ep:search' })"
+    :icon="useIcon({ icon: 'vi-ep:search' })"
    @click="onSearch"
  >
    {{ t('common.query') }}
@ -43,14 +43,14 @@ const onExpand = () => {
    v-if="showReset"
    :loading="resetLoading"
    plain
-    :icon="useIcon({ icon: 'ep:refresh-right' })"
+    :icon="useIcon({ icon: 'vi-ep:refresh-right' })"
    @click="onReset"
  >
    {{ t('common.reset') }}
  </BaseButton>
  <BaseButton
    v-if="showExpand"
-    :icon="useIcon({ icon: visible ? 'ep:arrow-up' : 'ep:arrow-down' })"
+    :icon="useIcon({ icon: visible ? 'vi-ep:arrow-up' : 'vi-ep:arrow-down' })"
    text
    @click="onExpand"
  >
--- a/src/components/Setting/src/Setting.vue
+++ b/src/components/Setting/src/Setting.vue
@ -161,7 +161,7 @@ const themeChange = () => {
    class="fixed top-[45%] right-0 w-40px h-40px flex items-center justify-center bg-[var(--el-color-primary)] cursor-pointer z-10"
    @click="drawer = true"
  >
-    <Icon icon="ant-design:setting-outlined" color="#fff" />
+    <Icon icon="vi-ant-design:setting-outlined" color="#fff" />
  </div>

  <ElDrawer v-model="drawer" direction="rtl" size="350px" :z-index="4000">
--- a/src/components/Setting/src/components/ColorRadioPicker.vue
+++ b/src/components/Setting/src/components/ColorRadioPicker.vue
@ -49,7 +49,7 @@ watch(
      }"
      @click="colorVal = item"
    >
-      <Icon v-if="colorVal === item" color="#fff" icon="ep:check" :size="16" />
+      <Icon v-if="colorVal === item" color="#fff" icon="vi-ep:check" :size="16" />
    </span>
  </div>
 </template>
--- a/src/components/SizeDropdown/src/SizeDropdown.vue
+++ b/src/components/SizeDropdown/src/SizeDropdown.vue
@ -27,7 +27,7 @@ const setCurrentSize = (size: ComponentSize) => {

 <template>
  <ElDropdown :class="prefixCls" trigger="click" @command="setCurrentSize">
-    <Icon :size="18" icon="mdi:format-size" :color="color" class="cursor-pointer" />
+    <Icon :size="18" icon="vi-mdi:format-size" :color="color" class="cursor-pointer" />
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@ -406,7 +406,7 @@ export default defineComponent({
          ) : videoPreview.includes(field) ? (
            <BaseButton
              type="primary"
-              icon={<Icon icon="ep:video-play" />}
+              icon={<Icon icon="vi-ep:video-play" />}
              onClick={() => {
                createVideoViewer({
                  url
--- a/src/components/Table/src/components/ColumnSetting.vue
+++ b/src/components/Table/src/components/ColumnSetting.vue
@ -139,17 +139,17 @@ watch(
              <div class="flex items-center">
                <ElRadioGroup size="small" v-model="item.fixed">
                  <ElRadioButton label="left">
-                    <Icon icon="ep:arrow-left" />
+                    <Icon icon="vi-ep:arrow-left" />
                  </ElRadioButton>
                  <ElRadioButton :label="undefined">
-                    <Icon icon="ep:close" />
+                    <Icon icon="vi-ep:close" />
                  </ElRadioButton>
                  <ElRadioButton label="right">
-                    <Icon icon="ep:arrow-right" />
+                    <Icon icon="vi-ep:arrow-right" />
                  </ElRadioButton>
                </ElRadioGroup>

-                <div class="ml-12px cursor-move handle"><Icon icon="ep:rank" /></div>
+                <div class="ml-12px cursor-move handle"><Icon icon="vi-ep:rank" /></div>
              </div>
            </div>
          </ElCheckboxGroup>
--- a/src/components/Table/src/components/TableActions.vue
+++ b/src/components/Table/src/components/TableActions.vue
@ -46,7 +46,7 @@ export default defineComponent({
        <div class="text-right h-28px flex items-center justify-end">
          <div title="刷新" class="w-30px h-20px flex items-center justify-end" onClick={refresh}>
            <Icon
-              icon="ant-design:sync-outlined"
+              icon="vi-ant-design:sync-outlined"
              class="cursor-pointer"
              hover-color="var(--el-color-primary)"
            />
@ -58,7 +58,7 @@ export default defineComponent({
                return (
                  <div title="尺寸" class="w-30px h-20px flex items-center justify-end">
                    <Icon
-                      icon="ant-design:column-height-outlined"
+                      icon="vi-ant-design:column-height-outlined"
                      class="cursor-pointer"
                      hover-color="var(--el-color-primary)"
                    />
@ -91,7 +91,7 @@ export default defineComponent({
            onClick={showColumnSetting}
          >
            <Icon
-              icon="ant-design:setting-outlined"
+              icon="vi-ant-design:setting-outlined"
              class="cursor-pointer"
              hover-color="var(--el-color-primary)"
            />
--- a/src/components/TagsView/src/TagsView.vue
+++ b/src/components/TagsView/src/TagsView.vue
@ -281,7 +281,7 @@ watch(
      @click="move(-200)"
    >
      <Icon
-        icon="ep:d-arrow-left"
+        icon="vi-ep:d-arrow-left"
        color="var(--el-text-color-placeholder)"
        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
      />
@ -293,7 +293,7 @@ watch(
            :ref="itemRefs.set"
            :schema="[
              {
-                icon: 'ant-design:sync-outlined',
+                icon: 'vi-ant-design:sync-outlined',
                label: t('common.reload'),
                disabled: selectedTag?.fullPath !== item.fullPath,
                command: () => {
@ -301,7 +301,7 @@ watch(
                }
              },
              {
-                icon: 'ant-design:close-outlined',
+                icon: 'vi-ant-design:close-outlined',
                label: t('common.closeTab'),
                disabled: !!visitedViews?.length && selectedTag?.meta.affix,
                command: () => {
@ -310,7 +310,7 @@ watch(
              },
              {
                divided: true,
-                icon: 'ant-design:vertical-right-outlined',
+                icon: 'vi-ant-design:vertical-right-outlined',
                label: t('common.closeTheLeftTab'),
                disabled:
                  !!visitedViews?.length &&
@ -321,7 +321,7 @@ watch(
                }
              },
              {
-                icon: 'ant-design:vertical-left-outlined',
+                icon: 'vi-ant-design:vertical-left-outlined',
                label: t('common.closeTheRightTab'),
                disabled:
                  !!visitedViews?.length &&
@ -333,7 +333,7 @@ watch(
              },
              {
                divided: true,
-                icon: 'ant-design:tag-outlined',
+                icon: 'vi-ant-design:tag-outlined',
                label: t('common.closeOther'),
                disabled: selectedTag?.fullPath !== item.fullPath,
                command: () => {
@ -341,7 +341,7 @@ watch(
                }
              },
              {
-                icon: 'ant-design:line-outlined',
+                icon: 'vi-ant-design:line-outlined',
                label: t('common.closeAll'),
                command: () => {
                  closeAllTags()
@ -376,7 +376,7 @@ watch(
                  <Icon
                    :class="`${prefixCls}__item--close`"
                    color="#333"
-                    icon="ant-design:close-outlined"
+                    icon="vi-ant-design:close-outlined"
                    :size="12"
                    @click.prevent.stop="closeSelectedTag(item)"
                  />
@ -393,7 +393,7 @@ watch(
      @click="move(200)"
    >
      <Icon
-        icon="ep:d-arrow-right"
+        icon="vi-ep:d-arrow-right"
        color="var(--el-text-color-placeholder)"
        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
      />
@ -404,7 +404,7 @@ watch(
      @click="refreshSelectedTag(selectedTag)"
    >
      <Icon
-        icon="ant-design:reload-outlined"
+        icon="vi-ant-design:reload-outlined"
        color="var(--el-text-color-placeholder)"
        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
      />
@ -413,14 +413,14 @@ watch(
      trigger="click"
      :schema="[
        {
-          icon: 'ant-design:sync-outlined',
+          icon: 'vi-ant-design:sync-outlined',
          label: t('common.reload'),
          command: () => {
            refreshSelectedTag(selectedTag)
          }
        },
        {
-          icon: 'ant-design:close-outlined',
+          icon: 'vi-ant-design:close-outlined',
          label: t('common.closeTab'),
          disabled: !!visitedViews?.length && selectedTag?.meta.affix,
          command: () => {
@ -429,7 +429,7 @@ watch(
        },
        {
          divided: true,
-          icon: 'ant-design:vertical-right-outlined',
+          icon: 'vi-ant-design:vertical-right-outlined',
          label: t('common.closeTheLeftTab'),
          disabled: !!visitedViews?.length && selectedTag?.fullPath === visitedViews[0].fullPath,
          command: () => {
@ -437,7 +437,7 @@ watch(
          }
        },
        {
-          icon: 'ant-design:vertical-left-outlined',
+          icon: 'vi-ant-design:vertical-left-outlined',
          label: t('common.closeTheRightTab'),
          disabled:
            !!visitedViews?.length &&
@ -448,14 +448,14 @@ watch(
        },
        {
          divided: true,
-          icon: 'ant-design:tag-outlined',
+          icon: 'vi-ant-design:tag-outlined',
          label: t('common.closeOther'),
          command: () => {
            closeOthersTags()
          }
        },
        {
-          icon: 'ant-design:line-outlined',
+          icon: 'vi-ant-design:line-outlined',
          label: t('common.closeAll'),
          command: () => {
            closeAllTags()
@ -468,7 +468,7 @@ watch(
        class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer block"
      >
        <Icon
-          icon="ant-design:setting-outlined"
+          icon="vi-ant-design:setting-outlined"
          color="var(--el-text-color-placeholder)"
          :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
        />
--- a/src/components/ThemeSwitch/src/ThemeSwitch.vue
+++ b/src/components/ThemeSwitch/src/ThemeSwitch.vue
@ -11,9 +11,9 @@ const emit = defineEmits(['change'])

 const prefixCls = getPrefixCls('theme-switch')

-const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
+const Sun = useIcon({ icon: 'vi-emojione-monotone:sun', color: '#fde047' })

-const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon', color: '#fde047' })
+const CrescentMoon = useIcon({ icon: 'vi-emojione-monotone:crescent-moon', color: '#fde047' })

 const appStore = useAppStore()

--- a/src/components/UserInfo/src/components/LockPage.vue
+++ b/src/components/UserInfo/src/components/LockPage.vue
@ -75,7 +75,7 @@ function handleShowForm(show = false) {
      @click="handleShowForm(false)"
      v-show="showDate"
    >
-      <Icon icon="ep:lock" />
+      <Icon icon="vi-ep:lock" />
      <span>{{ t('lock.unlock') }}</span>
    </div>

--- a/src/components/VideoPlayerViewer/src/VideoPlayerViewer.vue
+++ b/src/components/VideoPlayerViewer/src/VideoPlayerViewer.vue
@ -41,7 +41,7 @@ const close = async () => {
        class="w-44px h-44px color-[#fff] bg-[var(--el-text-color-regular)] rounded-full border-[#fff] flex justify-center items-center cursor-pointer absolute top-40px right-40px"
        @click="close"
      >
-        <Icon icon="ep:close" :size="24" />
+        <Icon icon="vi-ep:close" :size="24" />
      </div>
      <VideoPlayer :url="url" :poster="poster" />
    </div>
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@ -32,3 +32,8 @@ export const DEFAULT_FILTER_COLUMN = ['expand', 'selection']
 * 是否根据headers->content-type自动转换数据格式
 */
 export const TRANSFORM_REQUEST_DATA = true
+
+/**
+ * 全局图标前缀
+ */
+export const ICON_PREFIX = 'vi-'
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -87,7 +87,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
    name: 'Dashboard',
    meta: {
      title: t('router.dashboard'),
-      icon: 'ant-design:dashboard-filled',
+      icon: 'vi-ant-design:dashboard-filled',
      alwaysShow: true
    },
    children: [
@ -123,7 +123,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
        name: 'DocumentLink',
        meta: {
          title: t('router.document'),
-          icon: 'clarity:document-solid'
+          icon: 'vi-clarity:document-solid'
        }
      }
    ]
@ -140,7 +140,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
        name: 'GuideDemo',
        meta: {
          title: t('router.guide'),
-          icon: 'cib:telegram-plane'
+          icon: 'vi-cib:telegram-plane'
        }
      }
    ]
@ -151,7 +151,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
    name: 'ComponentsDemo',
    meta: {
      title: t('router.component'),
-      icon: 'bx:bxs-component',
+      icon: 'vi-bx:bxs-component',
      alwaysShow: true
    },
    children: [
@ -416,7 +416,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
    name: 'Function',
    meta: {
      title: t('router.function'),
-      icon: 'ri:function-fill',
+      icon: 'vi-ri:function-fill',
      alwaysShow: true
    },
    children: [
@ -465,7 +465,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
    name: 'Hooks',
    meta: {
      title: 'hooks',
-      icon: 'ic:outline-webhook',
+      icon: 'vi-ic:outline-webhook',
      alwaysShow: true
    },
    children: [
@ -526,7 +526,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
    name: 'Level',
    meta: {
      title: t('router.level'),
-      icon: 'carbon:skill-level-advanced'
+      icon: 'vi-carbon:skill-level-advanced'
    },
    children: [
      {
@ -585,7 +585,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
    name: 'Example',
    meta: {
      title: t('router.example'),
-      icon: 'ep:management',
+      icon: 'vi-ep:management',
      alwaysShow: true
    },
    children: [
@ -653,7 +653,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
    name: 'Error',
    meta: {
      title: t('router.errorPage'),
-      icon: 'ci:error',
+      icon: 'vi-ci:error',
      alwaysShow: true
    },
    children: [
@ -690,7 +690,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
    name: 'Authorization',
    meta: {
      title: t('router.authorization'),
-      icon: 'eos-icons:role-binding',
+      icon: 'vi-eos-icons:role-binding',
      alwaysShow: true
    },
    children: [
--- a/src/views/Components/Icon.vue
+++ b/src/views/Components/Icon.vue
@ -44,10 +44,10 @@ const alarmClock = useIcon({ icon: 'ep:alarm-clock' })
  </ContentWrap>
  <ContentWrap :title="t('iconDemo.iconify')">
    <div class="flex justify-between">
-      <Icon icon="ep:aim" />
-      <Icon icon="ep:alarm-clock" />
-      <Icon icon="ep:baseball" />
-      <Icon icon="ep:chat-line-round" />
+      <Icon icon="vi-ep:aim" />
+      <Icon icon="vi-ep:alarm-clock" />
+      <Icon icon="vi-ep:baseball" />
+      <Icon icon="vi-ep:chat-line-round" />
    </div>
  </ContentWrap>
  <ContentWrap title="useIcon">
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@ -148,28 +148,28 @@ const schema = reactive<FormSchema[]>([
            <>
              <div class="flex justify-between w-[100%]">
                <Icon
-                  icon="ant-design:github-filled"
+                  icon="vi-ant-design:github-filled"
                  size={iconSize}
                  class="cursor-pointer ant-icon"
                  color={iconColor}
                  hoverColor={hoverColor}
                />
                <Icon
-                  icon="ant-design:wechat-filled"
+                  icon="vi-ant-design:wechat-filled"
                  size={iconSize}
                  class="cursor-pointer ant-icon"
                  color={iconColor}
                  hoverColor={hoverColor}
                />
                <Icon
-                  icon="ant-design:alipay-circle-filled"
+                  icon="vi-ant-design:alipay-circle-filled"
                  size={iconSize}
                  color={iconColor}
                  hoverColor={hoverColor}
                  class="cursor-pointer ant-icon"
                />
                <Icon
-                  icon="ant-design:weibo-circle-filled"
+                  icon="vi-ant-design:weibo-circle-filled"
                  size={iconSize}
                  color={iconColor}
                  hoverColor={hoverColor}
--- a/types/env.d.ts
+++ b/types/env.d.ts
@ -7,22 +7,6 @@ declare module '*.vue' {
  export default component
 }

-interface ImportMetaEnv {
-  readonly VITE_NODE_ENV: string
-  readonly VITE_APP_TITLE: string
-  readonly VITE_API_BASE_PATH: string
-  readonly VITE_BASE_PATH: string
-  readonly VITE_DROP_DEBUGGER: string
-  readonly VITE_DROP_CONSOLE: string
-  readonly VITE_SOURCEMAP: string
-  readonly VITE_OUT_DIR: string
-  readonly VITE_USE_BUNDLE_ANALYZER: string
-  readonly VITE_USE_ALL_ELEMENT_PLUS_STYLE: string
-  readonly VITE_USE_MOCK: string
-  readonly VITE_USE_CSS_SPLIT: string
-  readonly VITE_USE_ONLINE_ICON: string
-}
-
 declare global {
  interface ImportMeta {
    readonly env: ImportMetaEnv
--- a/types/global.d.ts
+++ b/types/global.d.ts
@ -66,4 +66,21 @@ declare global {
    topHeaderHoverColor?: string
    topToolBorderColor?: string
  }
+
+  declare interface ImportMetaEnv {
+    readonly VITE_NODE_ENV: string
+    readonly VITE_APP_TITLE: string
+    readonly VITE_API_BASE_PATH: string
+    readonly VITE_BASE_PATH: string
+    readonly VITE_DROP_DEBUGGER: string
+    readonly VITE_DROP_CONSOLE: string
+    readonly VITE_SOURCEMAP: string
+    readonly VITE_OUT_DIR: string
+    readonly VITE_USE_BUNDLE_ANALYZER: string
+    readonly VITE_USE_ALL_ELEMENT_PLUS_STYLE: string
+    readonly VITE_USE_MOCK: string
+    readonly VITE_USE_CSS_SPLIT: string
+    readonly VITE_USE_ONLINE_ICON: string
+    readonly VITE_ICON_PREFIX: string
+  }
 }
--- a/uno.config.ts
+++ b/uno.config.ts
@ -1,6 +1,7 @@
 import { defineConfig, toEscapedSelector as e, presetUno, presetIcons } from 'unocss'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
 import { loadEnv } from 'vite'
+import { ICON_PREFIX } from './src/constants'

 const root = process.cwd()

@ -18,13 +19,8 @@ const createPresetIcons = () => {
  } else {
    return [
      presetIcons({
-        prefix: ''
-        // 由于默认加载的是所有的图标，启动会非常慢，可以在这里去加载需要的图标，确保启动速度
-        // collections: {
-        //   carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
-        //   mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
-        //   logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
-        // }
+        autoInstall: false,
+        prefix: ICON_PREFIX
      })
    ]
  }