feat: 添加 Material Icon 主题支持，更新组件类型定义和 Vite 配置

components.d.ts

@@ -12,29 +12,21 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    Divider: typeof import('./src/components/divider/index.vue')['default']
+    IMaterialIconThemeGoogle: typeof import('~icons/material-icon-theme/google')['default']
-    ExploreContainer: typeof import('./src/components/ExploreContainer.vue')['default']
     IonApp: typeof import('@ionic/vue')['IonApp']
-    IonBackButton: typeof import('@ionic/vue')['IonBackButton']
     IonButton: typeof import('@ionic/vue')['IonButton']
     IonButtons: typeof import('@ionic/vue')['IonButtons']
-    IonCheckbox: typeof import('@ionic/vue')['IonCheckbox']
     IonContent: typeof import('@ionic/vue')['IonContent']
     IonHeader: typeof import('@ionic/vue')['IonHeader']
     IonIcon: typeof import('@ionic/vue')['IonIcon']
-    IonInput: typeof import('@ionic/vue')['IonInput']
     IonInputOtp: typeof import('@ionic/vue')['IonInputOtp']
     IonItem: typeof import('@ionic/vue')['IonItem']
-    IonItemDivider: typeof import('@ionic/vue')['IonItemDivider']
-    IonItemGroup: typeof import('@ionic/vue')['IonItemGroup']
     IonLabel: typeof import('@ionic/vue')['IonLabel']
-    IonNote: typeof import('@ionic/vue')['IonNote']
     IonPage: typeof import('@ionic/vue')['IonPage']
     IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
     IonTabBar: typeof import('@ionic/vue')['IonTabBar']
     IonTabButton: typeof import('@ionic/vue')['IonTabButton']
     IonTabs: typeof import('@ionic/vue')['IonTabs']
-    IonText: typeof import('@ionic/vue')['IonText']
     IonTitle: typeof import('@ionic/vue')['IonTitle']
     IonToolbar: typeof import('@ionic/vue')['IonToolbar']
     LayoutDefault: typeof import('./src/components/layout/default.vue')['default']
@@ -47,29 +39,21 @@ declare module 'vue' {
 
 // For TSX support
 declare global {
-  const Divider: typeof import('./src/components/divider/index.vue')['default']
+  const IMaterialIconThemeGoogle: typeof import('~icons/material-icon-theme/google')['default']
-  const ExploreContainer: typeof import('./src/components/ExploreContainer.vue')['default']
   const IonApp: typeof import('@ionic/vue')['IonApp']
-  const IonBackButton: typeof import('@ionic/vue')['IonBackButton']
   const IonButton: typeof import('@ionic/vue')['IonButton']
   const IonButtons: typeof import('@ionic/vue')['IonButtons']
-  const IonCheckbox: typeof import('@ionic/vue')['IonCheckbox']
   const IonContent: typeof import('@ionic/vue')['IonContent']
   const IonHeader: typeof import('@ionic/vue')['IonHeader']
   const IonIcon: typeof import('@ionic/vue')['IonIcon']
-  const IonInput: typeof import('@ionic/vue')['IonInput']
   const IonInputOtp: typeof import('@ionic/vue')['IonInputOtp']
   const IonItem: typeof import('@ionic/vue')['IonItem']
-  const IonItemDivider: typeof import('@ionic/vue')['IonItemDivider']
-  const IonItemGroup: typeof import('@ionic/vue')['IonItemGroup']
   const IonLabel: typeof import('@ionic/vue')['IonLabel']
-  const IonNote: typeof import('@ionic/vue')['IonNote']
   const IonPage: typeof import('@ionic/vue')['IonPage']
   const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
   const IonTabBar: typeof import('@ionic/vue')['IonTabBar']
   const IonTabButton: typeof import('@ionic/vue')['IonTabButton']
   const IonTabs: typeof import('@ionic/vue')['IonTabs']
-  const IonText: typeof import('@ionic/vue')['IonText']
   const IonTitle: typeof import('@ionic/vue')['IonTitle']
   const IonToolbar: typeof import('@ionic/vue')['IonToolbar']
   const LayoutDefault: typeof import('./src/components/layout/default.vue')['default']

package.json

@@ -31,6 +31,9 @@
   "devDependencies": {
     "@antfu/eslint-config": "^6.6.1",
     "@capacitor/cli": "8.0.0",
+    "@iconify-json/ic": "^1.2.4",
+    "@iconify-json/material-icon-theme": "^1.2.44",
+    "@iconify/vue": "^5.0.0",
     "@types/node": "^24.10.2",
     "@vitejs/plugin-legacy": "^7.2.1",
     "@vitejs/plugin-vue": "^6.0.2",
@@ -48,6 +51,7 @@
     "terser": "^5.44.1",
     "typescript": "~5.9.3",
     "unplugin-auto-import": "^20.3.0",
+    "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^30.0.0",
     "vite": "^7.2.7",
     "vitest": "^4.0.15",

pnpm-lock.yaml

@@ -54,6 +54,15 @@ importers:
       '@capacitor/cli':
         specifier: 8.0.0
         version: 8.0.0
+      '@iconify-json/ic':
+        specifier: ^1.2.4
+        version: 1.2.4
+      '@iconify-json/material-icon-theme':
+        specifier: ^1.2.44
+        version: 1.2.44
+      '@iconify/vue':
+        specifier: ^5.0.0
+        version: 5.0.0(vue@3.5.25(typescript@5.9.3))
       '@types/node':
         specifier: ^24.10.2
         version: 24.10.2
@@ -105,6 +114,9 @@ importers:
       unplugin-auto-import:
         specifier: ^20.3.0
         version: 20.3.0(@vueuse/core@14.1.0(vue@3.5.25(typescript@5.9.3)))
+      unplugin-icons:
+        specifier: ^22.5.0
+        version: 22.5.0(@vue/compiler-sfc@3.5.25)
       unplugin-vue-components:
         specifier: ^30.0.0
         version: 30.0.0(@babel/parser@7.28.5)(vue@3.5.25(typescript@5.9.3))
@@ -1050,6 +1062,23 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/ic@1.2.4':
+    resolution: {integrity: sha512-pzPMmrZrBQuwT7nmtrYdkttun8KalRGgZPIL1Ny9KpF2zjRGIUPN+npTfuD3lrgO/OnSwAoJWuekQwBpt/Cqrw==}
+
+  '@iconify-json/material-icon-theme@1.2.44':
+    resolution: {integrity: sha512-fw6hluIUX2rudZucEBevvKHHnR7GQOyjHHXUXRJsv8KmdHqxsV7JPPUlNnVO/eAELuXjM+UgtuAeRE9WlCPHog==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@3.1.0':
+    resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
+
+  '@iconify/vue@5.0.0':
+    resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
+    peerDependencies:
+      vue: '>=3'
+
   '@ionic/cli-framework-output@2.2.8':
     resolution: {integrity: sha512-TshtaFQsovB4NWRBydbNFawql6yul7d5bMiW1WYYf17hd99V6xdDdk3vtF51bw6sLkxON3bDQpWsnUc9/hVo3g==}
     engines: {node: '>=16.0.0'}
@@ -3835,6 +3864,29 @@ packages:
       '@vueuse/core':
         optional: true
 
+  unplugin-icons@22.5.0:
+    resolution: {integrity: sha512-MBlMtT5RuMYZy4TZgqUL2OTtOdTUVsS1Mhj6G1pEzMlFJlEnq6mhUfoIt45gBWxHcsOdXJDWLg3pRZ+YmvAVWQ==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      svelte:
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+
   unplugin-utils@0.3.1:
     resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
     engines: {node: '>=20.19.0'}
@@ -5167,6 +5219,27 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify-json/ic@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/material-icon-theme@1.2.44':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@3.1.0':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/types': 2.0.0
+      mlly: 1.8.0
+
+  '@iconify/vue@5.0.0(vue@3.5.25(typescript@5.9.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.25(typescript@5.9.3)
+
   '@ionic/cli-framework-output@2.2.8':
     dependencies:
       '@ionic/utils-terminal': 2.3.5
@@ -8277,6 +8350,18 @@ snapshots:
     optionalDependencies:
       '@vueuse/core': 14.1.0(vue@3.5.25(typescript@5.9.3))
 
+  unplugin-icons@22.5.0(@vue/compiler-sfc@3.5.25):
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/utils': 3.1.0
+      debug: 4.4.3(supports-color@8.1.1)
+      local-pkg: 1.1.2
+      unplugin: 2.3.11
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.25
+    transitivePeerDependencies:
+      - supports-color
+
   unplugin-utils@0.3.1:
     dependencies:
       pathe: 2.0.3

src/auth/components/verify-code.vue

@@ -2,6 +2,7 @@
 import type { AuthUserSignup } from "../type";
 import { toastController } from "@ionic/vue";
 import { logoGoogle, phonePortraitOutline } from "ionicons/icons";
+import MaterialIconThemeGoogle from "~icons/material-icon-theme/google";
 import { emailPattern } from "@/utils";
 import { authClient } from "..";
 

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/vue" />

vite.config.ts

@@ -4,6 +4,8 @@ import vue from "@vitejs/plugin-vue";
 import jsx from "@vitejs/plugin-vue-jsx";
 import dotenv from "dotenv";
 import autoImport from "unplugin-auto-import/vite";
+import iconsResolver from "unplugin-icons/resolver";
+import icons from "unplugin-icons/vite";
 import { IonicResolver } from "unplugin-vue-components/resolvers";
 import components from "unplugin-vue-components/vite";
 import { defineConfig } from "vite";
@@ -25,7 +27,10 @@ export default defineConfig({
     }),
     components({
       directoryAsNamespace: true,
-      resolvers: [IonicResolver()],
+      resolvers: [IonicResolver(), iconsResolver({ prefix: "i" })],
+    }),
+    icons({
+      autoInstall: true,
     }),
   ],
   resolve: {