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

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

packages/ui/src/components/common/LeftMenu.vue

@@ -1,40 +1,48 @@
 <script setup lang="ts">
+import IconAbout from '~icons/custom/about'
+import IconConnections from '~icons/custom/connections'
+import IconLog from '~icons/custom/log'
+import IconMqtt from '~icons/custom/mqtt'
+import IconNew from '~icons/custom/new'
+import IconScript from '~icons/custom/script'
+import IconSettings from '~icons/custom/settings'
 import { reactive } from 'vue'
+
 import useLinks from '../../composables/useLinks'
 
 const { linksMap } = useLinks()
 
 const featMenus = reactive({
   connections: {
-    icon: 'icon-connections',
+    icon: IconConnections,
     path: '/connections',
   },
   new: {
-    icon: 'icon-new',
-    path: '/connections',
+    icon: IconNew,
+    path: '/new',
   },
   script: {
-    icon: 'icon-script',
-    path: '/connections',
+    icon: IconScript,
+    path: '/script',
   },
   log: {
-    icon: 'icon-log',
-    path: '/connections',
+    icon: IconLog,
+    path: '/log',
   },
 })
 
 const helpMenus = reactive({
   settings: {
-    icon: 'icon-settings',
-    path: '/connections',
+    icon: IconSettings,
+    path: '/settings',
   },
   mqtt: {
-    icon: 'icon-mqtt',
-    path: '/connections',
+    icon: IconMqtt,
+    path: '/mqtt',
   },
   about: {
-    icon: 'icon-about',
-    path: '/connections',
+    icon: IconAbout,
+    path: '/about',
   },
 })
 </script>
@@ -46,14 +54,12 @@ const helpMenus = reactive({
     </a>
     <div class="flex flex-col">
       <router-link v-for="menu in featMenus" :key="menu.path" :to="menu.path" class="no-underline mb-8 text-main-white">
-        <!-- TODO: Add icon -->
-        <!-- <i :class="`iconfont ${menu.icon} text-xl`" /> -->
+        <component :is="menu.icon" class="text-xl" />
       </router-link>
     </div>
     <div class="flex flex-col">
       <router-link v-for="menu in helpMenus" :key="menu.path" :to="menu.path" class="no-underline mb-8 text-main-white">
-        <!-- TODO: Add icon -->
-        <!-- <i :class="`iconfont ${menu.icon} text-xl`" /> -->
+        <component :is="menu.icon" class="text-xl" />
       </router-link>
     </div>
   </el-aside>

packages/ui/tsconfig.json

@@ -8,7 +8,7 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
-    "types": ["element-plus/global", "node", "mqttx", "vite/client"],
+    "types": ["element-plus/global", "node", "mqttx", "vite/client", "unplugin-icons/types/vue"],
     "allowImportingTsExtensions": true,
     /* Linting */
     "strict": true,
@@ -21,6 +21,13 @@
     "skipLibCheck": true
   },
   "references": [{ "path": "./tsconfig.node.json" }],
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "__test__"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "__test__",
+    "./components.d.ts"
+  ],
   "exclude": ["node_modules"]
 }

packages/ui/vite.config.ts

@@ -2,12 +2,40 @@ import type { UserConfig } from 'vite'
 import path from 'node:path'
 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 { defineConfig } from 'vite'
-
 import dts from 'vite-plugin-dts'
 
 export default defineConfig({
-  plugins: [vue(), vueJsx(), dts()],
+  plugins: [
+    vue(),
+    vueJsx(),
+    dts(),
+    Components({
+      dts: true,
+      directoryAsNamespace: true,
+      dirs: ['src/components'],
+      resolvers: [
+        ElementPlusResolver(),
+        IconsResolver({
+          prefix: 'icon',
+          customCollections: [
+            'custom',
+          ],
+        }),
+      ],
+    }),
+    Icons({
+      compiler: 'vue3',
+      customCollections: {
+        custom: FileSystemIconLoader('./src/assets/icons'),
+      },
+    }),
+  ],
   resolve: {
     alias: {
       '@': '/src',