refactor: modify icons usage

.env.prod

@@ -1,5 +1,5 @@
 # 是否开启压缩资源
-VITE_COMPRESS_OPEN=N
+VITE_BUILD_COMPRESS=N
 
 # 压缩算法 gzip | brotliCompress | deflate | deflateRaw
 VITE_COMPRESS_TYPE=gzip

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, // 压缩算法

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": {

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>

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>

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="没有符合条件的图标" />

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"

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>

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">

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>

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>

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>

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>

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>

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>

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"

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>

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>

src/modules/assets.ts

@@ -1,6 +1,5 @@
 import 'uno.css'
 import '@/styles/index.css'
-import 'virtual:svg-icons-register'
 
 // 全局引入的静态资源
 export function install() {

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'

src/typings/package.d.ts

@@ -1,6 +0,0 @@
-declare module '~icons/*' {
-  import type { FunctionalComponent, SVGAttributes } from 'vue'
-
-  const component: FunctionalComponent<SVGAttributes>
-  export default component
-}

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>

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">

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>

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>

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>

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>

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',
-    },
-  },
 })