feat(图标): 添加 Iconify 图标库支持并创建测试页面

添加 @iconify/vue 依赖并全局注册组件创建图标测试页面用于验证不同图标库的使用体验添加相关测试用例确保组件正常导入

feat(图标): 添加 Iconify 图标库支持并创建测试页面
添加 @iconify/vue 依赖并全局注册组件创建图标测试页面用于验证不同图标库的使用体验添加相关测试用例确保组件正常导入
hookehuyr
Commit 682a53a8a5482870c470d777db19e808e8741531 682a53a8 1 parent a285b674
Showing 7 changed files with 166 additions and 7 deletions
package.json
pnpm-lock.yaml
src/main.js
src/router/routes.js
src/utils/__tests__/iconify_import.test.js
src/views/IconTestPage.vue
src/views/test.vue
--- a/package.json
View file @682a53a
+++ b/package.json
View file @682a53a
@@ -26,6 +26,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@heroicons/vue": "^2.2.0",
+    "@iconify/vue": "^5.0.0",
     "@sunsetglow/vue-pdf-viewer": "^0.3.67",
     "@vant/touch-emulator": "^1.4.0",
     "@vant/use": "^1.6.0",
--- a/pnpm-lock.yaml
View file @682a53a
+++ b/pnpm-lock.yaml
View file @682a53a
@@ -20,6 +20,9 @@ importers:
       '@heroicons/vue':
         specifier: ^2.2.0
         version: 2.2.0(vue@3.5.25)
+      '@iconify/vue':
+        specifier: ^5.0.0
+        version: 5.0.0(vue@3.5.25)
       '@sunsetglow/vue-pdf-viewer':
         specifier: ^0.3.67
         version: 0.3.72(vite@6.4.1(@types/node@20.19.25)(jiti@1.21.7)(less@4.4.2))
@@ -460,6 +463,14 @@ packages:
     peerDependencies:
       vue: '>= 3'
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/vue@5.0.0':
+    resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
+    peerDependencies:
+      vue: '>=3'
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -2414,6 +2425,13 @@ snapshots:
     dependencies:
       vue: 3.5.25
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/vue@5.0.0(vue@3.5.25)':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.25
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
--- a/src/main.js
View file @682a53a
+++ b/src/main.js
View file @682a53a
 /*
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-10 11:50:37
+ * @LastEditTime: 2025-12-27 22:06:35
  * @FilePath: /mlaj/src/main.js
  * @Description: 文件描述
  */
@@ -17,6 +17,7 @@ import '@vant/touch-emulator';
 import { library } from '@fortawesome/fontawesome-svg-core'
 /* import font awesome icon component */
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { Icon as IconifyIcon } from '@iconify/vue'
 /* import specific icons */
 import { faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark, faFileAlt, faTimes, faEye, faFilePdf, faExternalLinkAlt, faSpinner, faExclamationCircle, faDownload, faVenus, faMars, faMagnifyingGlassPlus, faMagnifyingGlassMinus } from '@fortawesome/free-solid-svg-icons'
@@ -31,13 +32,13 @@ if (!Array.prototype.at) {
     return this[n];
   };
 }
-
 const app = createApp(App)
+app.component('Icon', IconifyIcon)
+app.component('font-awesome-icon', FontAwesomeIcon)
 // 屏蔽警告信息
 app.config.warnHandler = () => null;
 app.config.globalProperties.$http = axios; // 关键语句
-app.component('font-awesome-icon', FontAwesomeIcon)
 /**
  * @function restoreHashAfterOAuth
  * @description 前端复原 OAuth 回跳的 hash 路由位置：当 URL 中存在 ret_hash 参数且当前无 hash 时，将其拼回地址栏。
@@ -55,6 +56,7 @@ function restoreHashAfterOAuth() {
         window.history.replaceState(null, '', new_url);
     }
 }
+void restoreHashAfterOAuth
 // 在安装路由前进行一次 hash 复原，确保初始路由正确
 // restoreHashAfterOAuth()
--- a/src/router/routes.js
View file @682a53a
+++ b/src/router/routes.js
View file @682a53a
 /*
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-24 10:58:25
+ * @LastEditTime: 2025-12-27 22:18:08
  * @FilePath: /mlaj/src/router/routes.js
  * @Description: 路由地址映射配置
  */
@@ -248,6 +248,12 @@ export const routes = [
     meta: { title: 'test' },
   },
   {
+    path: '/test/icon',
+    name: 'IconTest',
+    component: () => import('../views/IconTestPage.vue'),
+    meta: { title: 'Icon测试' },
+  },
+  {
     path: '/animation',
     name: 'animation',
     component: () => import('../views/animation.vue'),
--- a/src/utils/__tests__/iconify_import.test.js 0 → 100644
View file @682a53a
+++ b/src/utils/__tests__/iconify_import.test.js 0 → 100644
View file @682a53a
+import { describe, expect, it } from 'vitest'
+import { Icon } from '@iconify/vue'
+
+describe('iconify', () => {
+  it('Icon 组件可以被正常导入', () => {
+    expect(Icon).toBeTruthy()
+  })
+})
+
--- a/src/views/IconTestPage.vue 0 → 100644
View file @682a53a
+++ b/src/views/IconTestPage.vue 0 → 100644
View file @682a53a
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 p-4">
+    <div class="mx-auto max-w-3xl">
+      <div class="flex items-center justify-between">
+        <div>
+          <div class="text-xl font-bold text-slate-900">图标库测试</div>
+          <div class="mt-1 text-sm text-slate-600">在本页验证 Iconify 的使用体验与渲染效果</div>
+        </div>
+        <div class="flex items-center gap-3">
+          <van-icon name="apps-o" size="22" class="text-slate-700" />
+          <font-awesome-icon icon="eye" class="text-slate-700" />
+        </div>
+      </div>
+
+      <div class="mt-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div class="flex-1">
+            <div class="text-sm font-medium text-slate-800">Iconify 图标名</div>
+            <div class="mt-2 flex items-center gap-2">
+              <input
+                v-model="icon_name"
+                type="text"
+                class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none focus:border-slate-400"
+                placeholder="例如：mdi:home / lucide:camera / solar:heart-bold"
+              />
+              <button
+                type="button"
+                class="shrink-0 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
+                @click="resetIcon"
+              >
+                重置
+              </button>
+            </div>
+          </div>
+
+          <div class="flex gap-4">
+            <div class="w-28">
+              <div class="text-sm font-medium text-slate-800">大小</div>
+              <input v-model.number="icon_size" type="range" min="16" max="64" class="mt-3 w-full" />
+              <div class="mt-1 text-xs text-slate-500">{{ icon_size }}px</div>
+            </div>
+            <div class="w-28">
+              <div class="text-sm font-medium text-slate-800">颜色</div>
+              <input v-model="icon_color" type="color" class="mt-2 h-9 w-full rounded-md border border-slate-200 bg-white" />
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
+            <div class="text-sm font-medium text-slate-800">Iconify（推荐）</div>
+            <div class="mt-3 flex items-center gap-3">
+              <Icon :icon="icon_name" :style="{ fontSize: icon_size + 'px', color: icon_color }" />
+              <div class="text-xs text-slate-600">
+                <div class="font-mono">{{ icon_name }}</div>
+                <div class="mt-1">按需加载 SVG，无需手动挑选图标包</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
+            <div class="text-sm font-medium text-slate-800">Vant / FontAwesome（对比）</div>
+            <div class="mt-3 flex items-center gap-4">
+              <div class="flex items-center gap-2">
+                <van-icon name="star-o" :size="icon_size" :color="icon_color" />
+                <div class="text-xs text-slate-600">van-icon</div>
+              </div>
+              <div class="flex items-center gap-2">
+                <font-awesome-icon icon="star" :style="{ fontSize: icon_size + 'px', color: icon_color }" />
+                <div class="text-xs text-slate-600">fa</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-4 rounded-xl border border-slate-200 bg-white p-4">
+          <div class="text-sm font-medium text-slate-800">常用图标示例</div>
+          <div class="mt-3 grid grid-cols-3 gap-3 sm:grid-cols-6">
+            <button
+              v-for="item in quick_icons"
+              :key="item"
+              type="button"
+              class="flex flex-col items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-2 py-3 hover:bg-slate-100"
+              @click="icon_name = item"
+            >
+              <Icon :icon="item" class="text-slate-800" style="font-size: 26px;" />
+              <div class="w-full truncate text-[11px] text-slate-600">{{ item }}</div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const icon_name = ref('mdi:home')
+const icon_size = ref(32)
+const icon_color = ref('#0f172a')
+
+const quick_icons = [
+  'mdi:home',
+  'mdi:account',
+  'mdi:bell-outline',
+  'mdi:qrcode-scan',
+  'lucide:camera',
+  'lucide:search',
+  'solar:heart-bold',
+  'solar:cart-3-bold',
+  'tabler:settings',
+  'tabler:share',
+  'ri:wechat-fill',
+  'ph:download-simple-bold'
+]
+
+const resetIcon = () => {
+  icon_name.value = 'mdi:home'
+  icon_size.value = 32
+  icon_color.value = '#0f172a'
+}
+</script>
+
+<style scoped></style>
--- a/src/views/test.vue
View file @682a53a
+++ b/src/views/test.vue
View file @682a53a
 <!--
  * @Date: 2025-12-18 00:22:07
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-22 14:01:23
+ * @LastEditTime: 2025-12-27 22:17:50
  * @FilePath: /mlaj/src/views/test.vue
  * @Description: 文件描述
 -->
@@ -9,7 +9,6 @@
   <button @click="setVolume">设置音量</button>
   <audio ref="audioRef" src="https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3"></audio>
-  <!-- 使用封装的星空背景组件 -->
   <StarryBackground bgImage="https://cdn.ipadbiz.cn/mlaj/images/test-bgg03.jpg" />
 </template>
@@ -21,7 +20,6 @@ const audioRef = ref(null);
 const setVolume = async () => {
   try {
-    // 激活音频上下文
     await audioRef.value.play();
     if (typeof WeixinJSBridge !== 'undefined') {
       WeixinJSBridge.invoke('setAudioVolume', { volume: 0.5 }, (res) => {