From 09e4d7d3325ec442d7c98f6fc14649b9f740c9e8 Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Wed, 3 Apr 2024 11:21:07 +0800
Subject: [PATCH] refactor: modify icons usage

---
 .env.prod                                     |  2 +-
 build/plugins.ts                              | 34 +++++++++----------
 package.json                                  |  1 -
 src/assets/{icons => svg-icons}/cool.svg      |  0
 src/assets/{icons => svg-icons}/logo.svg      |  0
 src/components/common/DarkModeSwitch.vue      |  6 ++--
 src/components/custom/CopyText.vue            |  2 +-
 src/components/custom/IconSelect/index.vue    |  4 +--
 .../custom/{EIcon.vue => NovaIcon.vue}        |  6 +++-
 src/layouts/components/common/BackTop.vue     |  2 +-
 src/layouts/components/common/NoticeList.vue  |  2 +-
 src/layouts/components/header/Breadcrumb.vue  |  2 +-
 .../components/header/CollapaseButton.vue     |  4 +--
 src/layouts/components/header/FullScreen.vue  |  4 +--
 src/layouts/components/header/Notices.vue     |  2 +-
 src/layouts/components/header/Search.vue      |  2 +-
 src/layouts/components/header/Setting.vue     |  2 +-
 src/layouts/components/sider/Logo.vue         |  5 +--
 src/layouts/components/tab/Reload.vue         |  2 +-
 src/layouts/components/tab/TabBar.vue         |  4 +--
 src/modules/assets.ts                         |  1 -
 src/typings/env.d.ts                          |  2 +-
 src/typings/package.d.ts                      |  6 ----
 src/views/dashboard/monitor/index.vue         |  8 ++---
 src/views/dashboard/workbench/index.vue       | 12 +++----
 src/views/list/cardList/index.vue             |  2 +-
 src/views/list/commonList/index.vue           | 10 +++---
 src/views/login/components/Login/index.vue    | 10 +++---
 src/views/login/components/Register/index.vue |  8 ++---
 unocss.config.ts                              |  5 ---
 30 files changed, 69 insertions(+), 81 deletions(-)
 rename src/assets/{icons => svg-icons}/cool.svg (100%)
 rename src/assets/{icons => svg-icons}/logo.svg (100%)
 rename src/components/custom/{EIcon.vue => NovaIcon.vue} (79%)
 delete mode 100644 src/typings/package.d.ts

diff --git a/.env.prod b/.env.prod
index dcfba5c..29a3c4e 100644
--- a/.env.prod
+++ b/.env.prod
@@ -1,5 +1,5 @@
 # 是否开启压缩资源
-VITE_COMPRESS_OPEN=N
+VITE_BUILD_COMPRESS=N
 
 # 压缩算法 gzip | brotliCompress | deflate | deflateRaw
 VITE_COMPRESS_TYPE=gzip
diff --git a/build/plugins.ts b/build/plugins.ts
index 5b6eae5..0e18d54 100644
--- a/build/plugins.ts
+++ b/build/plugins.ts
@@ -1,4 +1,3 @@
-import path from 'node:path'
 import UnoCSS from '@unocss/vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
@@ -7,13 +6,11 @@ import AutoImport from 'unplugin-auto-import/vite'
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 import viteCompression from 'vite-plugin-compression'
 import Icons from 'unplugin-icons/vite'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 
 // https://github.com/antfu/unplugin-icons
 import IconsResolver from 'unplugin-icons/resolver'
 
-// https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
-
 /**
  * @description: 设置vite插件配置
  * @param {*} env - 环境变量配置
@@ -43,28 +40,31 @@ export function createVitePlugins(env: ImportMetaEnv) {
     // auto import components lib
     Components({
       dts: 'src/typings/components.d.ts',
-      resolvers: [IconsResolver(), NaiveUiResolver()],
+      resolvers: [
+        IconsResolver({
+          prefix: false,
+          customCollections: [
+            'svg-icons',
+          ],
+        }),
+        NaiveUiResolver(),
+      ],
     }),
 
     // auto import iconify's icons
     Icons({
       defaultStyle: 'display:inline-block',
       compiler: 'vue3',
+      customCollections: {
+        'svg-icons': FileSystemIconLoader(
+          'src/assets/svg-icons',
+          svg => svg.replace(/^<svg /, '<svg fill="currentColor" width="1.2em" height="1.2em"'),
+        ),
+      },
     }),
-
-    // auto use svg icon
-    createSvgIconsPlugin({
-      // 指定需要缓存的图标文件夹
-      iconDirs: [path.resolve(__dirname, '../src/assets/icons')],
-      // 指定symbolId格式
-      symbolId: 'icon-[dir]-[name]',
-      // inject: 'body-last',
-      // customDomId: '__svg__icons__dom__',
-    }),
-
   ]
   // use compression
-  if (env.VITE_COMPRESS_OPEN === 'Y') {
+  if (env.VITE_BUILD_COMPRESS === 'Y') {
     const { VITE_COMPRESS_TYPE = 'gzip' } = env
     plugins.push(viteCompression({
       algorithm: VITE_COMPRESS_TYPE, // 压缩算法
diff --git a/package.json b/package.json
index 975af9d..42ed094 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,6 @@
     "vite": "^5.1.6",
     "vite-bundle-visualizer": "^1.1.0",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^2.0.6"
   },
   "simple-git-hooks": {
diff --git a/src/assets/icons/cool.svg b/src/assets/svg-icons/cool.svg
similarity index 100%
rename from src/assets/icons/cool.svg
rename to src/assets/svg-icons/cool.svg
diff --git a/src/assets/icons/logo.svg b/src/assets/svg-icons/logo.svg
similarity index 100%
rename from src/assets/icons/logo.svg
rename to src/assets/svg-icons/logo.svg
diff --git a/src/components/common/DarkModeSwitch.vue b/src/components/common/DarkModeSwitch.vue
index 1c9c708..5208a0d 100644
--- a/src/components/common/DarkModeSwitch.vue
+++ b/src/components/common/DarkModeSwitch.vue
@@ -35,9 +35,9 @@ function renderLabel(option: any) {
 <template>
   <n-popselect :value="appStore.storeColorMode" :render-label="renderLabel" :options="options" trigger="click" @update:value="appStore.setColorMode">
     <CommonWrapper>
-      <i-icon-park-outline-moon v-if="appStore.storeColorMode === 'dark'" />
-      <i-icon-park-outline-sun-one v-if="appStore.storeColorMode === 'light'" />
-      <i-icon-park-outline-laptop-computer v-if="appStore.storeColorMode === 'auto'" />
+      <icon-park-outline-moon v-if="appStore.storeColorMode === 'dark'" />
+      <icon-park-outline-sun-one v-if="appStore.storeColorMode === 'light'" />
+      <icon-park-outline-laptop-computer v-if="appStore.storeColorMode === 'auto'" />
     </CommonWrapper>
   </n-popselect>
 </template>
diff --git a/src/components/custom/CopyText.vue b/src/components/custom/CopyText.vue
index 2119255..92d8496 100644
--- a/src/components/custom/CopyText.vue
+++ b/src/components/custom/CopyText.vue
@@ -14,7 +14,7 @@ const text = useVModel(props, 'modelValue', emit)
       {{ text }}
     </n-ellipsis>
     <span v-copy="text" class="copy_icon">
-      <i-icon-park-outline-copy />
+      <icon-park-outline-copy />
     </span>
   </div>
 </template>
diff --git a/src/components/custom/IconSelect/index.vue b/src/components/custom/IconSelect/index.vue
index 3750a40..66b5db6 100644
--- a/src/components/custom/IconSelect/index.vue
+++ b/src/components/custom/IconSelect/index.vue
@@ -18,7 +18,7 @@ function handleSelectIcon(icon: string) {
     <template #trigger>
       <n-input v-model:value="currentIcon" readonly placeholder="选择目标图标">
         <template #suffix>
-          <e-icon :icon="currentIcon || 'icon-park-outline:all-application'" />
+          <nova-icon :icon="currentIcon || 'icon-park-outline:all-application'" />
         </template>
       </n-input>
     </template>
@@ -33,7 +33,7 @@ function handleSelectIcon(icon: string) {
           class="border border-gray-200 m-2px p-5px flex-center"
           @click="handleSelectIcon(item)"
         >
-          <e-icon :icon="item" :size="24" />
+          <nova-icon :icon="item" :size="24" />
         </div>
       </div>
       <n-empty v-else class="w-full" description="没有符合条件的图标" />
diff --git a/src/components/custom/EIcon.vue b/src/components/custom/NovaIcon.vue
similarity index 79%
rename from src/components/custom/EIcon.vue
rename to src/components/custom/NovaIcon.vue
index f3aee98..8fc1283 100644
--- a/src/components/custom/EIcon.vue
+++ b/src/components/custom/NovaIcon.vue
@@ -2,19 +2,23 @@
 import { Icon } from '@iconify/vue'
 
 interface iconPorps {
+  /* 图标名称 */
   icon?: string
+  /* 图标颜色 */
   color?: string
+  /* 图标大小 */
   size?: number
+  /* 图标深度 */
   depth?: 1 | 2 | 3 | 4 | 5
 }
 const props = withDefaults(defineProps<iconPorps>(), {
   size: 18,
-  icon: 'icon-park-outline:baby-feet',
 })
 </script>
 
 <template>
   <n-icon
+    v-if="props.icon"
     :size="props.size"
     :depth="props.depth"
     :color="props.color"
diff --git a/src/layouts/components/common/BackTop.vue b/src/layouts/components/common/BackTop.vue
index 0db3fa2..84eb8db 100644
--- a/src/layouts/components/common/BackTop.vue
+++ b/src/layouts/components/common/BackTop.vue
@@ -5,7 +5,7 @@
     <n-tooltip placement="left" trigger="hover">
       <template #trigger>
         <div wh-full flex-center>
-          <i-icon-park-outline-to-top />
+          <icon-park-outline-to-top />
         </div>
       </template>
       <span>返回顶部</span>
diff --git a/src/layouts/components/common/NoticeList.vue b/src/layouts/components/common/NoticeList.vue
index 7da96a6..9f8d1ec 100644
--- a/src/layouts/components/common/NoticeList.vue
+++ b/src/layouts/components/common/NoticeList.vue
@@ -21,7 +21,7 @@ interface Emits {
             </n-ellipsis>
           </template>
           <template #avatar>
-            <e-icon :icon="item.icon" :size="30" class="c-primary" />
+            <nova-icon :icon="item.icon" :size="30" class="c-primary" />
           </template>
           <template v-if="item.tagTitle" #header-extra>
             <n-tag :bordered="false" :type="item.tagType" size="small">
diff --git a/src/layouts/components/header/Breadcrumb.vue b/src/layouts/components/header/Breadcrumb.vue
index ed4a96d..7010357 100644
--- a/src/layouts/components/header/Breadcrumb.vue
+++ b/src/layouts/components/header/Breadcrumb.vue
@@ -21,7 +21,7 @@ const appStore = useAppStore()
       class="flex-center gap-2 cursor-pointer split"
       @click="router.push(item.path)"
     >
-      <e-icon v-if="appStore.showBreadcrumbIcon" :icon="item.meta.icon" />
+      <nova-icon v-if="appStore.showBreadcrumbIcon" :icon="item.meta.icon" />
       <span class="whitespace-nowrap">{{ item.meta.title }}</span>
     </n-el>
   </TransitionGroup>
diff --git a/src/layouts/components/header/CollapaseButton.vue b/src/layouts/components/header/CollapaseButton.vue
index febfb0d..e41d308 100644
--- a/src/layouts/components/header/CollapaseButton.vue
+++ b/src/layouts/components/header/CollapaseButton.vue
@@ -8,8 +8,8 @@ const appStore = useAppStore()
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <CommonWrapper @click="appStore.toggleCollapse()">
-        <i-icon-park-outline-menu-unfold v-if="appStore.collapsed" />
-        <i-icon-park-outline-menu-fold v-else />
+        <icon-park-outline-menu-unfold v-if="appStore.collapsed" />
+        <icon-park-outline-menu-fold v-else />
       </CommonWrapper>
     </template>
     <span>切换侧边栏</span>
diff --git a/src/layouts/components/header/FullScreen.vue b/src/layouts/components/header/FullScreen.vue
index 22ffa56..3dd5f65 100644
--- a/src/layouts/components/header/FullScreen.vue
+++ b/src/layouts/components/header/FullScreen.vue
@@ -8,8 +8,8 @@ const appStore = useAppStore()
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <CommonWrapper @click="appStore.toggleFullScreen()">
-        <i-icon-park-outline-off-screen-two v-if="appStore.fullScreen" />
-        <i-icon-park-outline-full-screen-two v-else />
+        <icon-park-outline-off-screen-two v-if="appStore.fullScreen" />
+        <icon-park-outline-full-screen-two v-else />
       </CommonWrapper>
     </template>
     <span>全屏</span>
diff --git a/src/layouts/components/header/Notices.vue b/src/layouts/components/header/Notices.vue
index 7e1dce1..78101e0 100644
--- a/src/layouts/components/header/Notices.vue
+++ b/src/layouts/components/header/Notices.vue
@@ -102,7 +102,7 @@ const groupMessage = computed(() => {
         <template #trigger>
           <CommonWrapper>
             <n-badge :value="massageCount" :max="99" style="color: unset">
-              <i-icon-park-outline-remind />
+              <icon-park-outline-remind />
             </n-badge>
           </CommonWrapper>
         </template>
diff --git a/src/layouts/components/header/Search.vue b/src/layouts/components/header/Search.vue
index d0a2e34..c844cc7 100644
--- a/src/layouts/components/header/Search.vue
+++ b/src/layouts/components/header/Search.vue
@@ -48,7 +48,7 @@ function handleSelect(value: string) {
   >
     <template #prefix>
       <n-icon>
-        <i-icon-park-outline-search />
+        <icon-park-outline-search />
       </n-icon>
     </template>
   </n-auto-complete>
diff --git a/src/layouts/components/header/Setting.vue b/src/layouts/components/header/Setting.vue
index c4b6aca..c284d50 100644
--- a/src/layouts/components/header/Setting.vue
+++ b/src/layouts/components/header/Setting.vue
@@ -76,7 +76,7 @@ function resetSetting() {
     <template #trigger>
       <CommonWrapper @click="openSetting">
         <div>
-          <i-icon-park-outline-setting-two />
+          <icon-park-outline-setting-two />
           <n-drawer v-model:show="drawerActive" :width="300">
             <n-drawer-content title="系统设置" closable>
               <n-space vertical>
diff --git a/src/layouts/components/sider/Logo.vue b/src/layouts/components/sider/Logo.vue
index 342de95..5df026c 100644
--- a/src/layouts/components/sider/Logo.vue
+++ b/src/layouts/components/sider/Logo.vue
@@ -12,10 +12,7 @@ const name = import.meta.env.VITE_APP_NAME
     class="h-60px text-xl flex-center cursor-pointer"
     @click="router.push('/')"
   >
-    <SvgIcon
-      name="logo"
-      :size="32"
-    />
+    <svg-icons-logo class="text-1.5em" />
     <span
       v-show="!appStore.collapsed"
       class="mx-3 text-ellipsis overflow-hidden whitespace-nowrap"
diff --git a/src/layouts/components/tab/Reload.vue b/src/layouts/components/tab/Reload.vue
index 9c49b6c..75631fe 100644
--- a/src/layouts/components/tab/Reload.vue
+++ b/src/layouts/components/tab/Reload.vue
@@ -18,7 +18,7 @@ function handleReload() {
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <CommonWrapper @click="handleReload">
-        <i-icon-park-outline-refresh :class="{ 'animate-spin': loading }" />
+        <icon-park-outline-refresh :class="{ 'animate-spin': loading }" />
       </CommonWrapper>
     </template>
     <span>刷新页面</span>
diff --git a/src/layouts/components/tab/TabBar.vue b/src/layouts/components/tab/TabBar.vue
index b5f96de..3855e4a 100644
--- a/src/layouts/components/tab/TabBar.vue
+++ b/src/layouts/components/tab/TabBar.vue
@@ -130,7 +130,7 @@ function handleDropTabs(key: string, option: any) {
         @contextmenu="handleContextMenu($event, item)"
       >
         <div class="flex-x-center gap-2">
-          <e-icon :icon="item.meta.icon" /> {{ item.meta.title }}
+          <nova-icon :icon="item.meta.icon" /> {{ item.meta.title }}
         </div>
       </n-tab>
       <template #suffix>
@@ -144,7 +144,7 @@ function handleDropTabs(key: string, option: any) {
           @select="handleDropTabs"
         >
           <CommonWrapper>
-            <i-icon-park-outline-application-menu />
+            <icon-park-outline-application-menu />
           </CommonWrapper>
         </n-dropdown>
       </template>
diff --git a/src/modules/assets.ts b/src/modules/assets.ts
index 6817e28..3c4eb31 100644
--- a/src/modules/assets.ts
+++ b/src/modules/assets.ts
@@ -1,6 +1,5 @@
 import 'uno.css'
 import '@/styles/index.css'
-import 'virtual:svg-icons-register'
 
 // 全局引入的静态资源
 export function install() {
diff --git a/src/typings/env.d.ts b/src/typings/env.d.ts
index d464233..1c96aee 100644
--- a/src/typings/env.d.ts
+++ b/src/typings/env.d.ts
@@ -14,7 +14,7 @@ interface ImportMetaEnv {
   /** 开启请求代理 */
   readonly VITE_HTTP_PROXY?: 'Y' | 'N'
   /** 是否开启打包压缩 */
-  readonly VITE_COMPRESS_OPEN?: 'Y' | 'N'
+  readonly VITE_BUILD_COMPRESS?: 'Y' | 'N'
   /** 压缩算法类型 */
   readonly VITE_COMPRESS_TYPE?:
     | 'gzip'
diff --git a/src/typings/package.d.ts b/src/typings/package.d.ts
deleted file mode 100644
index 3643543..0000000
--- a/src/typings/package.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module '~icons/*' {
-  import type { FunctionalComponent, SVGAttributes } from 'vue'
-
-  const component: FunctionalComponent<SVGAttributes>
-  export default component
-}
diff --git a/src/views/dashboard/monitor/index.vue b/src/views/dashboard/monitor/index.vue
index 7baff0b..fe396fd 100644
--- a/src/views/dashboard/monitor/index.vue
+++ b/src/views/dashboard/monitor/index.vue
@@ -50,7 +50,7 @@ const tableData = [
               color="#de4307"
               size="42"
             >
-              <i-icon-park-outline-chart-histogram />
+              <icon-park-outline-chart-histogram />
             </n-icon>
           </n-space>
           <template #footer>
@@ -82,7 +82,7 @@ const tableData = [
               color="#ffb549"
               size="42"
             >
-              <i-icon-park-outline-chart-graph />
+              <icon-park-outline-chart-graph />
             </n-icon>
           </n-space>
           <template #footer>
@@ -114,7 +114,7 @@ const tableData = [
               color="#1687a7"
               size="42"
             >
-              <i-icon-park-outline-average />
+              <icon-park-outline-average />
             </n-icon>
           </n-space>
           <template #footer>
@@ -146,7 +146,7 @@ const tableData = [
               color="#42218E"
               size="42"
             >
-              <i-icon-park-outline-chart-pie />
+              <icon-park-outline-chart-pie />
             </n-icon>
           </n-space>
           <template #footer>
diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue
index 1907d13..84f0742 100644
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@@ -29,7 +29,7 @@ const { userInfo } = useAuthStore()
                   <template #avatar>
                     <n-el>
                       <n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
-                        <e-icon :size="26" icon="icon-park-outline:user" />
+                        <nova-icon :size="26" icon="icon-park-outline:user" />
                       </n-icon-wrapper>
                     </n-el>
                   </template>
@@ -47,7 +47,7 @@ const { userInfo } = useAuthStore()
                   <template #avatar>
                     <n-el>
                       <n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
-                        <e-icon :size="26" icon="icon-park-outline:every-user" />
+                        <nova-icon :size="26" icon="icon-park-outline:every-user" />
                       </n-icon-wrapper>
                     </n-el>
                   </template>
@@ -65,7 +65,7 @@ const { userInfo } = useAuthStore()
                   <template #avatar>
                     <n-el>
                       <n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
-                        <e-icon :size="26" icon="icon-park-outline:preview-open" />
+                        <nova-icon :size="26" icon="icon-park-outline:preview-open" />
                       </n-icon-wrapper>
                     </n-el>
                   </template>
@@ -83,7 +83,7 @@ const { userInfo } = useAuthStore()
                   <template #avatar>
                     <n-el>
                       <n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
-                        <e-icon :size="26" icon="icon-park-outline:star" />
+                        <nova-icon :size="26" icon="icon-park-outline:star" />
                       </n-icon-wrapper>
                     </n-el>
                   </template>
@@ -237,7 +237,7 @@ const { userInfo } = useAuthStore()
                   订单数
                 </n-text>
                 <n-icon-wrapper :size="46" :border-radius="999">
-                  <e-icon :size="26" icon="icon-park-outline:all-application" />
+                  <nova-icon :size="26" icon="icon-park-outline:all-application" />
                 </n-icon-wrapper>
                 <n-text strong class="text-2xl">
                   1,234,123
@@ -253,7 +253,7 @@ const { userInfo } = useAuthStore()
                 </n-text>
                 <n-el>
                   <n-icon-wrapper :size="46" color="var(--warning-color)" :border-radius="999">
-                    <e-icon :size="26" icon="icon-park-outline:list-bottom" />
+                    <nova-icon :size="26" icon="icon-park-outline:list-bottom" />
                   </n-icon-wrapper>
                 </n-el>
                 <n-text strong class="text-2xl">
diff --git a/src/views/list/cardList/index.vue b/src/views/list/cardList/index.vue
index d213f81..6f915e2 100644
--- a/src/views/list/cardList/index.vue
+++ b/src/views/list/cardList/index.vue
@@ -104,7 +104,7 @@ const radioDate = [
                   color="#de4307"
                   size="24"
                 >
-                  <i-icon-park-outline-chart-histogram />
+                  <icon-park-outline-chart-histogram />
                 </n-icon>
               </template>
               <template #action>
diff --git a/src/views/list/commonList/index.vue b/src/views/list/commonList/index.vue
index fb65a5b..bb6e4be 100644
--- a/src/views/list/commonList/index.vue
+++ b/src/views/list/commonList/index.vue
@@ -187,13 +187,13 @@ function handleAddTable() {
       <n-flex class="mt-1em" justify="end">
         <NButton type="primary" @click="getUserList">
           <template #icon>
-            <i-icon-park-outline-search />
+            <icon-park-outline-search />
           </template>
           搜索
         </NButton>
         <NButton strong secondary @click="handleResetSearch">
           <template #icon>
-            <i-icon-park-outline-redo />
+            <icon-park-outline-redo />
           </template>
           重置
         </NButton>
@@ -204,19 +204,19 @@ function handleAddTable() {
         <div class="flex gap-4">
           <NButton type="primary" @click="handleAddTable">
             <template #icon>
-              <i-icon-park-outline-add-one />
+              <icon-park-outline-add-one />
             </template>
             新建
           </NButton>
           <NButton strong secondary>
             <template #icon>
-              <i-icon-park-outline-afferent />
+              <icon-park-outline-afferent />
             </template>
             批量导入
           </NButton>
           <NButton strong secondary class="ml-a">
             <template #icon>
-              <i-icon-park-outline-download />
+              <icon-park-outline-download />
             </template>
             下载
           </NButton>
diff --git a/src/views/login/components/Login/index.vue b/src/views/login/components/Login/index.vue
index 260ee40..7fbd3b0 100644
--- a/src/views/login/components/Login/index.vue
+++ b/src/views/login/components/Login/index.vue
@@ -69,10 +69,10 @@ checkUserAccount()
       <n-form-item path="pwd">
         <n-input v-model:value="formValue.pwd" type="password" placeholder="输入密码" clearable show-password-on="click">
           <template #password-invisible-icon>
-            <i-icon-park-outline-preview-close-one />
+            <icon-park-outline-preview-close-one />
           </template>
           <template #password-visible-icon>
-            <i-icon-park-outline-preview-open />
+            <icon-park-outline-preview-open />
           </template>
         </n-input>
       </n-form-item>
@@ -99,17 +99,17 @@ checkUserAccount()
     <n-space justify="center">
       <n-button circle>
         <template #icon>
-          <n-icon><i-icon-park-outline-wechat /></n-icon>
+          <n-icon><icon-park-outline-wechat /></n-icon>
         </template>
       </n-button>
       <n-button circle>
         <template #icon>
-          <n-icon><i-icon-park-outline-tencent-qq /></n-icon>
+          <n-icon><icon-park-outline-tencent-qq /></n-icon>
         </template>
       </n-button>
       <n-button circle>
         <template #icon>
-          <n-icon><i-icon-park-outline-github-one /></n-icon>
+          <n-icon><icon-park-outline-github-one /></n-icon>
         </template>
       </n-button>
     </n-space>
diff --git a/src/views/login/components/Register/index.vue b/src/views/login/components/Register/index.vue
index 5c4115d..e87aafd 100644
--- a/src/views/login/components/Register/index.vue
+++ b/src/views/login/components/Register/index.vue
@@ -58,10 +58,10 @@ function handleRegister() {}
           show-password-on="click"
         >
           <template #password-invisible-icon>
-            <i-icon-park-outline-preview-close-one />
+            <icon-park-outline-preview-close-one />
           </template>
           <template #password-visible-icon>
-            <i-icon-park-outline-preview-open />
+            <icon-park-outline-preview-open />
           </template>
         </n-input>
       </n-form-item>
@@ -74,10 +74,10 @@ function handleRegister() {}
           show-password-on="click"
         >
           <template #password-invisible-icon>
-            <i-icon-park-outline-preview-close-one />
+            <icon-park-outline-preview-close-one />
           </template>
           <template #password-visible-icon>
-            <i-icon-park-outline-preview-open />
+            <icon-park-outline-preview-open />
           </template>
         </n-input>
       </n-form-item>
diff --git a/unocss.config.ts b/unocss.config.ts
index 2906dd9..2683fd6 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -11,9 +11,4 @@ export default defineConfig({
     'flex-x-center': 'flex justify-center',
     'flex-y-center': 'flex items-center',
   },
-  theme: {
-    colors: {
-      primary: '#165DFFFF',
-    },
-  },
 })