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

2025-12-12 00:42:28 +07:00
parent d7b61cd3c0
commit 14618192ca
6 changed files with 99 additions and 19 deletions
--- a/components.d.ts
+++ b/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']
-    ExploreContainer: typeof import('./src/components/ExploreContainer.vue')['default']
+    IMaterialIconThemeGoogle: typeof import('~icons/material-icon-theme/google')['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 ExploreContainer: typeof import('./src/components/ExploreContainer.vue')['default']
+  const IMaterialIconThemeGoogle: typeof import('~icons/material-icon-theme/google')['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']
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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
--- a/src/auth/components/verify-code.vue
+++ b/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 "..";

--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/vue" />
--- a/vite.config.ts
+++ b/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: {