feat(icons): integrate unplugin-icons for enhanced icon management

apps/desktop/electron.vite.config.ts

@@ -1,6 +1,9 @@
 import { resolve } from 'node:path'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import IconsResolver from 'unplugin-icons/resolver'
+import Icons from 'unplugin-icons/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import VueRouter from 'unplugin-vue-router/vite'
@@ -31,7 +34,21 @@ export default defineConfig({
         dts: true,
         directoryAsNamespace: true,
         dirs: ['src/components', '../../../../packages/ui/src/components'],
-        resolvers: [ElementPlusResolver()],
+        resolvers: [
+          ElementPlusResolver(),
+          IconsResolver({
+            prefix: 'icon',
+            customCollections: [
+              'custom',
+            ],
+          }),
+        ],
+      }),
+      Icons({
+        compiler: 'vue3',
+        customCollections: {
+          custom: FileSystemIconLoader('../../packages/ui/src/assets/icons'),
+        },
       }),
     ],
   },

apps/desktop/package.json

@@ -51,6 +51,7 @@
     "sass": "^1.80.6",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3",
+    "unplugin-icons": "^0.20.1",
     "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-router": "^0.10.8",
     "vite": "^5.4.10",

apps/desktop/tsconfig.web.json

@@ -7,7 +7,7 @@
     "paths": {
       "@renderer/*": ["src/renderer/src/*"]
     },
-    "types": ["element-plus/global", "node", "mqttx"],
+    "types": ["element-plus/global", "node", "mqttx", "unplugin-icons/types/vue"],
     "verbatimModuleSyntax": true
   },
   "include": [

apps/web/package.json

@@ -43,6 +43,7 @@
     "sass": "^1.80.6",
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.3",
+    "unplugin-icons": "^0.20.1",
     "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-router": "^0.10.8",
     "vite": "^5.4.10",

apps/web/tsconfig.app.json

@@ -6,7 +6,7 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["element-plus/global", "node", "mqttx"],
+    "types": ["element-plus/global", "node", "mqttx", "unplugin-icons/types/vue"],
     "esModuleInterop": true
   },
   "include": [

apps/web/vite.config.ts

@@ -2,6 +2,9 @@ import { fileURLToPath, URL } from 'node:url'
 
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import IconsResolver from 'unplugin-icons/resolver'
+import Icons from 'unplugin-icons/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import VueRouter from 'unplugin-vue-router/vite'
@@ -17,7 +20,21 @@ export default defineConfig({
       dts: true,
       directoryAsNamespace: true,
       dirs: ['src/components', '../../packages/ui/src/components'],
-      resolvers: [ElementPlusResolver()],
+      resolvers: [
+        ElementPlusResolver(),
+        IconsResolver({
+          prefix: 'icon',
+          customCollections: [
+            'custom',
+          ],
+        }),
+      ],
+    }),
+    Icons({
+      compiler: 'vue3',
+      customCollections: {
+        custom: FileSystemIconLoader('../../packages/ui/src/assets/icons'),
+      },
     }),
   ],
   resolve: {

eslint.config.mjs

@@ -21,9 +21,6 @@ export default antfu(
        */
       markdown: 'prettier',
     },
-    ignores: [
-      '**/assets/fonts',
-    ],
   },
   {
     rules: {

packages/ui/components.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    CommonEmptyView: typeof import('./src/components/common/EmptyView.vue')['default']
+    CommonLeftMenu: typeof import('./src/components/common/LeftMenu.vue')['default']
+    CommonMainView: typeof import('./src/components/common/MainView.vue')['default']
+    CommonSplitView: typeof import('./src/components/common/SplitView.vue')['default']
+    ConnectionsDetailsView: typeof import('./src/components/connections/DetailsView.vue')['default']
+    ConnectionsListView: typeof import('./src/components/connections/ListView.vue')['default']
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

packages/ui/package.json

@@ -42,6 +42,8 @@
     "sass": "^1.80.6",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3",
+    "unplugin-icons": "^0.20.1",
+    "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.10",
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^2.1.4",