From ef61e2ecdda86196004e81ad00bf3d4a10aa5824 Mon Sep 17 00:00:00 2001
From: Yue JIN <yjin@nustarnuclear.com>
Date: Wed, 28 Aug 2024 15:31:33 +0800
Subject: [PATCH] feat: nuxt icon

---
 README.md                                     |  14 +-
 assets/styles/global.css                      |   3 +-
 augmentation.d.ts                             |   1 +
 components/App/AppBar.vue                     |   2 +-
 components/App/AppNotification.vue            |  96 ++++++-------
 nuxt.config.ts                                |  43 ++----
 package.json                                  |   4 +-
 plugins/vuetify.ts                            |  37 ++---
 pnpm-lock.yaml                                | 127 +++++++++++++++---
 .../__snapshots__/component.nuxt.test.ts.snap |   6 +-
 vuetify.config.ts                             |   3 -
 11 files changed, 197 insertions(+), 139 deletions(-)

diff --git a/README.md b/README.md
index dd8e729..4304330 100644
--- a/README.md
+++ b/README.md
@@ -71,15 +71,12 @@
 ### Nuxt Modules
 
 - [Vuetify Nuxt Module](https://github.com/userquin/vuetify-nuxt-module) - Zero-config Nuxt Module for Vuetify
-- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs
-- [Pinia](https://github.com/vuejs/pinia) - intuitive, type-safe, light and flexible Store for Vue
-- [DevTools](https://github.com/nuxt/devtools) - unleash Nuxt Developer Experience
+- [VueUse](https://github.com/vueuse/vueuse) - Collection of useful composition APIs
+- [Pinia](https://github.com/vuejs/pinia) - Intuitive, type-safe, light and flexible Store for Vue
+- [Nuxt Icon](https://github.com/nuxt/icon) - Icon module for Nuxt with 200,000+ ready to use icons from Iconify
+- [Nuxt ECharts](https://github.com/kingyue737/nuxt-echarts) - Nuxt module for Apache ECharts™
 - [Nuxt Auth Utils](https://github.com/Atinux/nuxt-auth-utils) - Minimalist Authentication module for Nuxt
 
-### Plugins
-
-- [`rollup-plugin-regexp`](https://github.com/kingyue737/rollup-plugin-regexp) - auto replace [`@mdi/font`](https://github.com/Templarian/MaterialDesign-Webfont) with [`@mdi/js`](https://github.com/Templarian/MaterialDesign-JS) in `<VIcon>`, reduce bundle size
-
 ### Coding Style
 
 - [Prettier](https://prettier.io/), single quotes, no semi
@@ -91,11 +88,10 @@
 - [pnpm](https://pnpm.js.org/) - Fast, disk space efficient package manager
 - [Netlify](https://www.netlify.com/) - zero-config deployment
 - [VS Code Extensions](./.vscode/extensions.json)
-  - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - TypeScript support inside Vue SFCs
+  - [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - TypeScript support inside Vue SFCs
   - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Find and fix problems in your code
   - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Code formatter
   - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
-  - [Material Design Icons Intellisense](https://marketplace.visualstudio.com/items?itemName=lukas-tr.materialdesignicons-intellisense)
 
 ## Try it now!
 
diff --git a/assets/styles/global.css b/assets/styles/global.css
index 1bd7a41..552a433 100644
--- a/assets/styles/global.css
+++ b/assets/styles/global.css
@@ -58,8 +58,7 @@ html {
   }
 }
 
-.v-icon svg {
-  fill: currentColor;
+.v-icon .iconify {
   width: 100%;
   height: 100%;
 }
diff --git a/augmentation.d.ts b/augmentation.d.ts
index 488e780..1df02e0 100644
--- a/augmentation.d.ts
+++ b/augmentation.d.ts
@@ -24,6 +24,7 @@ declare module '#app' {
 declare module '#auth-utils' {
   interface User {
     login: string
+    avatar_url: string
   }
 }
 
diff --git a/components/App/AppBar.vue b/components/App/AppBar.vue
index ae6fb27..19722a7 100644
--- a/components/App/AppBar.vue
+++ b/components/App/AppBar.vue
@@ -60,7 +60,7 @@ const { loggedIn, clear, user } = useUserSession()
             <v-btn icon v-bind="mergeProps(menu, tooltip)" class="ml-1">
               <v-icon v-if="!loggedIn" icon="mdi-account-circle" size="36" />
               <v-avatar v-else color="primary" size="36">
-                <v-img :src="`https://github.com/${user!.login}.png`" />
+                <v-img :src="user?.avatar_url" />
               </v-avatar>
             </v-btn>
           </template>
diff --git a/components/App/AppNotification.vue b/components/App/AppNotification.vue
index 91cea3e..47b1113 100644
--- a/components/App/AppNotification.vue
+++ b/components/App/AppNotification.vue
@@ -27,54 +27,58 @@ function toggleAll() {
     :rounded="0"
     @click="toggleAll"
   />
-  <teleport to="body">
-    <v-card
-      elevation="6"
-      width="400"
-      class="d-flex flex-column notification-card"
-      :class="{ 'notification-card--open': showAll }"
-    >
-      <v-toolbar flat density="compact">
-        <v-toolbar-title
-          class="font-weight-light text-body-1"
-          :text="notifications.length ? 'Notification' : 'No New Notifications'"
-        />
-        <v-btn
-          v-tooltip="{ text: 'Clear All Notifications' }"
-          size="small"
-          icon="mdi-bell-remove"
-          @click="emptyNotifications"
-        />
-        <v-btn
-          v-tooltip="{ text: 'Hide Notifications' }"
-          class="mr-0"
-          size="small"
-          icon="$expand"
-          @click="toggleAll"
-        />
-      </v-toolbar>
-      <v-slide-y-reverse-transition
-        tag="div"
-        class="d-flex flex-column notification-box"
-        group
-        hide-on-leave
+  <ClientOnly>
+    <teleport to="body">
+      <v-card
+        elevation="6"
+        width="400"
+        class="d-flex flex-column notification-card"
+        :class="{ 'notification-card--open': showAll }"
       >
-        <div
-          v-for="notification in notificationsShown"
-          :key="notification.id"
-          class="notification-item-wrapper"
-        >
-          <AppNotificationItem
-            v-model="notification.show"
-            :notification="notification"
-            :timeout="timeout"
-            class="notification-item"
-            @close="deleteNotification(notification.id)"
+        <v-toolbar flat density="compact">
+          <v-toolbar-title
+            class="font-weight-light text-body-1"
+            :text="
+              notifications.length ? 'Notification' : 'No New Notifications'
+            "
+          />
+          <v-btn
+            v-tooltip="{ text: 'Clear All Notifications' }"
+            size="small"
+            icon="mdi-bell-remove"
+            @click="emptyNotifications"
           />
-        </div>
-      </v-slide-y-reverse-transition>
-    </v-card>
-  </teleport>
+          <v-btn
+            v-tooltip="{ text: 'Hide Notifications' }"
+            class="mr-0"
+            size="small"
+            icon="$expand"
+            @click="toggleAll"
+          />
+        </v-toolbar>
+        <v-slide-y-reverse-transition
+          tag="div"
+          class="d-flex flex-column notification-box"
+          group
+          hide-on-leave
+        >
+          <div
+            v-for="notification in notificationsShown"
+            :key="notification.id"
+            class="notification-item-wrapper"
+          >
+            <AppNotificationItem
+              v-model="notification.show"
+              :notification="notification"
+              :timeout="timeout"
+              class="notification-item"
+              @close="deleteNotification(notification.id)"
+            />
+          </div>
+        </v-slide-y-reverse-transition>
+      </v-card>
+    </teleport>
+  </ClientOnly>
 </template>
 
 <style scoped>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3adb58d..a89f4b3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,17 +1,3 @@
-import regexpPlugin from 'rollup-plugin-regexp'
-import * as mdicons from '@mdi/js'
-
-const mdi: Record<string, string> = {}
-Object.keys(mdicons).forEach((key) => {
-  const value = (mdicons as Record<string, string>)[key]
-  mdi[
-    key
-      .replace(/([A-Z])/g, '-$1')
-      .toLowerCase()
-      .replace(/([0-9]+)/g, '-$1')
-  ] = value
-})
-
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
@@ -21,6 +7,7 @@ export default defineNuxtConfig({
     'vuetify-nuxt-module',
     'nuxt-auth-utils',
     'nuxt-echarts',
+    '@nuxt/icon',
     '@nuxt/eslint',
     '@nuxt/test-utils/module',
   ],
@@ -39,6 +26,19 @@ export default defineNuxtConfig({
       },
     },
   },
+  icon: {
+    mode: 'svg',
+    clientBundle: {
+      // scan all components in the project and include icons
+      // scan: true,
+    },
+    customCollections: [
+      {
+        prefix: 'custom',
+        dir: './assets/icons',
+      },
+    ],
+  },
   echarts: {
     charts: ['LineChart', 'BarChart', 'PieChart', 'RadarChart'],
     renderer: 'svg',
@@ -54,21 +54,6 @@ export default defineNuxtConfig({
     ],
   },
   vite: {
-    plugins: [
-      regexpPlugin({
-        exclude: ['node_modules/**'],
-        find: /\b(?<![/\w])(mdi-[\w-]+)\b(?!\.)/,
-        replace: (match: string) => {
-          if (mdi[match]) {
-            return mdi[match]
-          } else {
-            console.warn('[plugin-regexp] No matched svg icon for ' + match)
-            return match
-          }
-        },
-        sourcemap: false,
-      }),
-    ],
     build: { sourcemap: false },
   },
   runtimeConfig: {
diff --git a/package.json b/package.json
index 4b727c3..4162c42 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,9 @@
     "format": "prettier . --write"
   },
   "devDependencies": {
-    "@mdi/js": "^7.4.47",
+    "@iconify-json/mdi": "^1.1.68",
     "@nuxt/eslint": "^0.5.3",
+    "@nuxt/icon": "^1.5.0",
     "@nuxt/test-utils": "^3.14.1",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.9.1",
@@ -24,7 +25,6 @@
     "nuxt-echarts": "^0.2.2",
     "playwright-core": "^1.46.1",
     "prettier": "^3.3.3",
-    "rollup-plugin-regexp": "^5.0.1",
     "vitest": "^2.0.5",
     "vue-tsc": "^2.0.29",
     "vuetify-nuxt-module": "^0.17.1"
diff --git a/plugins/vuetify.ts b/plugins/vuetify.ts
index 8dddab9..0260726 100644
--- a/plugins/vuetify.ts
+++ b/plugins/vuetify.ts
@@ -1,32 +1,23 @@
-import { type IconSet, type IconProps } from 'vuetify'
+import type { IconProps } from 'vuetify'
+import { Icon } from '#components'
 import type { VDataTable } from 'vuetify/components'
 import { useStorage } from '@vueuse/core'
-export type DataTableHeaders = VDataTable['$props']['headers']
-
-function filename(path: string) {
-  return path
-    .split(/(\\|\/)/g)
-    .pop()!
-    .replace(/\.[^/.]+$/, '')
-}
+import { aliases } from 'vuetify/iconsets/mdi'
 
-const svgIcons = Object.fromEntries(
-  Object.entries(
-    import.meta.glob('~/assets/icons/*.svg', {
-      eager: true,
-      query: '?raw',
-      import: 'default',
-    }),
-  ).map(([k, v]) => [filename(k), v]),
-)
-const custom: IconSet = {
-  component: (props: IconProps) =>
-    h(props.tag, { innerHTML: svgIcons[props.icon as string] }),
-}
+export type DataTableHeaders = VDataTable['$props']['headers']
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => {
-    vuetifyOptions.icons!.sets!['custom'] = custom
+    vuetifyOptions.icons = {
+      defaultSet: 'nuxtIcon',
+      sets: {
+        nuxtIcon: {
+          component: ({ icon, tag, ...rest }: IconProps) =>
+            h(tag, rest, [h(Icon, { name: aliases[icon as string] ?? icon })]),
+        },
+      },
+      aliases,
+    }
     const primary = useStorage('theme-primary', '#1697f6').value
     vuetifyOptions.theme = {
       themes: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fa978da..6a2358e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,12 +21,15 @@ importers:
         specifier: ~3.6.15
         version: 3.6.15(typescript@5.5.4)(vite-plugin-vuetify@2.0.4)(vue@3.4.38(typescript@5.5.4))
     devDependencies:
-      '@mdi/js':
-        specifier: ^7.4.47
-        version: 7.4.47
+      '@iconify-json/mdi':
+        specifier: ^1.1.68
+        version: 1.1.68
       '@nuxt/eslint':
         specifier: ^0.5.3
         version: 0.5.3(eslint@9.9.1(jiti@1.21.6))(magicast@0.3.4)(rollup@4.21.1)(typescript@5.5.4)(vite@5.4.2(@types/node@22.5.0)(terser@5.31.6))
+      '@nuxt/icon':
+        specifier: ^1.5.0
+        version: 1.5.0(magicast@0.3.4)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.0)(terser@5.31.6))(vue@3.4.38(typescript@5.5.4))
       '@nuxt/test-utils':
         specifier: ^3.14.1
         version: 3.14.1(@vue/test-utils@2.4.6)(h3@1.12.0)(happy-dom@14.12.3)(magicast@0.3.4)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.4))(playwright-core@1.46.1)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.0)(terser@5.31.6))(vitest@2.0.5(@types/node@22.5.0)(happy-dom@14.12.3)(terser@5.31.6))(vue-router@4.4.3(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
@@ -51,9 +54,6 @@ importers:
       prettier:
         specifier: ^3.3.3
         version: 3.3.3
-      rollup-plugin-regexp:
-        specifier: ^5.0.1
-        version: 5.0.1(rollup@4.21.1)
       vitest:
         specifier: ^2.0.5
         version: 2.0.5(@types/node@22.5.0)(happy-dom@14.12.3)(terser@5.31.6)
@@ -70,6 +70,9 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/install-pkg@0.4.1':
+    resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
+
   '@antfu/utils@0.7.10':
     resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
 
@@ -705,6 +708,23 @@ packages:
     resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/mdi@1.1.68':
+    resolution: {integrity: sha512-7//TKCiXLU6kNWeOJRTBbisofVO7rF1sD1TZTL4/V9nqlmVNczQ5IOY0GgKOTsitkcTnX9GXgrgbjw3OI5B69w==}
+
+  '@iconify/collections@1.0.453':
+    resolution: {integrity: sha512-s6X0BI2CeFwE8VNpxkMrIo1Peud7InUtGgYEYw2hfBT59pjhMJRAzMWpAM7ZvBx5N+UfXVE19dbyLGOcazdJ4A==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@2.1.32':
+    resolution: {integrity: sha512-LeifFZPPKu28O3AEDpYJNdEbvS4/ojAPyIW+pF/vUpJTYnbTiXUHkCh0bwgFRzKvdpb8H4Fbfd/742++MF4fPQ==}
+
+  '@iconify/vue@4.1.3-beta.1':
+    resolution: {integrity: sha512-N7iEOnWfhjbMqiyGMhotJKip23nrK5l3+T1hQwpEjKeMD2o4zOjm8zmeEfOOH81EXllhhOm7upR8jcH499YRWA==}
+    peerDependencies:
+      vue: '>=3'
+
   '@ioredis/commands@1.2.0':
     resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==}
 
@@ -746,9 +766,6 @@ packages:
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
 
-  '@mdi/js@7.4.47':
-    resolution: {integrity: sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==}
-
   '@netlify/functions@2.8.1':
     resolution: {integrity: sha512-+6wtYdoz0yE06dSa9XkP47tw5zm6g13QMeCwM3MmHx1vn8hzwFa51JtmfraprdkL7amvb7gaNM+OOhQU1h6T8A==}
     engines: {node: '>=14.0.0'}
@@ -825,6 +842,9 @@ packages:
       vite-plugin-eslint2:
         optional: true
 
+  '@nuxt/icon@1.5.0':
+    resolution: {integrity: sha512-8taJrtLYV14LhuLUCcyUwn/Ej49xIEsrWneBglx6OEqb2wnw6IOtCVYT/O44/rL+94EK2y3rXD9LegWUqdbpqA==}
+
   '@nuxt/kit@3.13.0':
     resolution: {integrity: sha512-gbhSbDvYfkGQ0R2ztqTLQLHRMv+7g50kAKKuN6mbF4tL9jg7NPnQ8bAarn2I4Qx8xtmwO+qY1ABkmYMn5S1CpA==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -916,30 +936,35 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-glibc@2.4.1':
     resolution: {integrity: sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.4.1':
     resolution: {integrity: sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.4.1':
     resolution: {integrity: sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.4.1':
     resolution: {integrity: sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-wasm@2.4.1':
     resolution: {integrity: sha512-/ZR0RxqxU/xxDGzbzosMjh4W6NdYFMqq2nvo2b8SLi7rsl/4jkL8S5stIikorNkdR50oVDvqb/3JT05WM+CRRA==}
@@ -1083,46 +1108,55 @@ packages:
     resolution: {integrity: sha512-sWWgdQ1fq+XKrlda8PsMCfut8caFwZBmhYeoehJ05FdI0YZXk6ZyUjWLrIgbR/VgiGycrFKMMgp7eJ69HOF2pQ==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.21.1':
     resolution: {integrity: sha512-9OIiSuj5EsYQlmwhmFRA0LRO0dRRjdCVZA3hnmZe1rEwRk11Jy3ECGGq3a7RrVEZ0/pCsYWx8jG3IvcrJ6RCew==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.21.1':
     resolution: {integrity: sha512-0kuAkRK4MeIUbzQYu63NrJmfoUVicajoRAL1bpwdYIYRcs57iyIV9NLcuyDyDXE2GiZCL4uhKSYAnyWpjZkWow==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.21.1':
     resolution: {integrity: sha512-/6dYC9fZtfEY0vozpc5bx1RP4VrtEOhNQGb0HwvYNwXD1BBbwQ5cKIbUVVU7G2d5WRE90NfB922elN8ASXAJEA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.21.1':
     resolution: {integrity: sha512-ltUWy+sHeAh3YZ91NUsV4Xg3uBXAlscQe8ZOXRCVAKLsivGuJsrkawYPUEyCV3DYa9urgJugMLn8Z3Z/6CeyRQ==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.21.1':
     resolution: {integrity: sha512-BggMndzI7Tlv4/abrgLwa/dxNEMn2gC61DCLrTzw8LkpSKel4o+O+gtjbnkevZ18SKkeN3ihRGPuBxjaetWzWg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.21.1':
     resolution: {integrity: sha512-z/9rtlGd/OMv+gb1mNSjElasMf9yXusAxnRDrBaYB+eS1shFm6/4/xDH1SAISO5729fFKUkJ88TkGPRUh8WSAA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.21.1':
     resolution: {integrity: sha512-kXQVcWqDcDKw0S2E0TmhlTLlUgAmMVqPrJZR+KpH/1ZaZhLSl23GZpQVmawBQGVhyP5WXIsIQ/zqbDBBYmxm5w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.21.1':
     resolution: {integrity: sha512-CbFv/WMQsSdl+bpX6rVbzR4kAjSSBuDgCqb1l4J68UYsQNalz5wOqLGYj4ZI0thGpyX5kc+LLZ9CL+kpqDovZA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.21.1':
     resolution: {integrity: sha512-3Q3brDgA86gHXWHklrwdREKIrIbxC0ZgU8lwpj0eEKGBQH+31uPqr0P2v11pn0tSIxHvcdOWxa4j+YvLNx1i6g==}
@@ -3057,6 +3091,9 @@ packages:
   package-json-from-dist@1.0.0:
     resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
 
+  package-manager-detector@0.2.0:
+    resolution: {integrity: sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -3473,9 +3510,6 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
-  rollup-plugin-regexp@5.0.1:
-    resolution: {integrity: sha512-0iYd6R8dkjt4ELNACA/FNoDeg4mKBR1jUvmZtPqg6BXQ22ml9HPRU6OtY4AjjiaA+jMxREAlfCVhY684LsGZgg==}
-
   rollup-plugin-visualizer@5.12.0:
     resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
     engines: {node: '>=14'}
@@ -3752,6 +3786,9 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
+  tinyexec@0.3.0:
+    resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
+
   tinyglobby@0.2.5:
     resolution: {integrity: sha512-Dlqgt6h0QkoHttG53/WGADNh9QhcjCAIZMTERAVhdpmIBEejSuLI9ZmGKWzB7tweBjlk30+s/ofi4SLmBeTYhw==}
     engines: {node: '>=12.0.0'}
@@ -4318,6 +4355,11 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@antfu/install-pkg@0.4.1':
+    dependencies:
+      package-manager-detector: 0.2.0
+      tinyexec: 0.3.0
+
   '@antfu/utils@0.7.10': {}
 
   '@apidevtools/json-schema-ref-parser@11.7.0':
@@ -4827,6 +4869,33 @@ snapshots:
 
   '@humanwhocodes/retry@0.3.0': {}
 
+  '@iconify-json/mdi@1.1.68':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/collections@1.0.453':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@2.1.32':
+    dependencies:
+      '@antfu/install-pkg': 0.4.1
+      '@antfu/utils': 0.7.10
+      '@iconify/types': 2.0.0
+      debug: 4.3.6
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      mlly: 1.7.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@iconify/vue@4.1.3-beta.1(vue@3.4.38(typescript@5.5.4))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.4.38(typescript@5.5.4)
+
   '@ioredis/commands@1.2.0': {}
 
   '@isaacs/cliui@8.0.2':
@@ -4885,8 +4954,6 @@ snapshots:
       - encoding
       - supports-color
 
-  '@mdi/js@7.4.47': {}
-
   '@netlify/functions@2.8.1':
     dependencies:
       '@netlify/serverless-functions-api': 1.19.1
@@ -5054,6 +5121,27 @@ snapshots:
       - utf-8-validate
       - vite
 
+  '@nuxt/icon@1.5.0(magicast@0.3.4)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.0)(terser@5.31.6))(vue@3.4.38(typescript@5.5.4))':
+    dependencies:
+      '@iconify/collections': 1.0.453
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 2.1.32
+      '@iconify/vue': 4.1.3-beta.1(vue@3.4.38(typescript@5.5.4))
+      '@nuxt/devtools-kit': 1.4.1(magicast@0.3.4)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.0)(terser@5.31.6))
+      '@nuxt/kit': 3.13.0(magicast@0.3.4)(rollup@4.21.1)
+      consola: 3.2.3
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      mlly: 1.7.1
+      pathe: 1.1.2
+      std-env: 3.7.0
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+      - vite
+      - vue
+
   '@nuxt/kit@3.13.0(magicast@0.3.4)(rollup@4.21.1)':
     dependencies:
       '@nuxt/schema': 3.13.0(rollup@4.21.1)
@@ -7772,6 +7860,8 @@ snapshots:
 
   package-json-from-dist@1.0.0: {}
 
+  package-manager-detector@0.2.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -8144,13 +8234,6 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
-  rollup-plugin-regexp@5.0.1(rollup@4.21.1):
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
-      magic-string: 0.30.11
-    transitivePeerDependencies:
-      - rollup
-
   rollup-plugin-visualizer@5.12.0(rollup@4.21.1):
     dependencies:
       open: 8.4.2
@@ -8451,6 +8534,8 @@ snapshots:
 
   tinybench@2.9.0: {}
 
+  tinyexec@0.3.0: {}
+
   tinyglobby@0.2.5:
     dependencies:
       fdir: 6.3.0(picomatch@4.0.2)
diff --git a/tests/__snapshots__/component.nuxt.test.ts.snap b/tests/__snapshots__/component.nuxt.test.ts.snap
index 208fd28..f009841 100644
--- a/tests/__snapshots__/component.nuxt.test.ts.snap
+++ b/tests/__snapshots__/component.nuxt.test.ts.snap
@@ -19,9 +19,9 @@ exports[`component DialogConfirm.vue > should open and close 1`] = `
   </div>
   <!---->
   <!---->
-  <div class="v-card-text font-weight-bold d-flex"><i class="v-icon notranslate v-theme--light v-icon--size-default text-warning mr-2" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
-        <path d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
-      </svg></i><span>message</span></div>
+  <div class="v-card-text font-weight-bold d-flex"><i class="v-icon notranslate v-theme--light v-icon--size-default text-warning mr-2" aria-hidden="true">
+      <!---->
+    </i><span>message</span></div>
   <div class="v-card-actions">
     <div class="v-spacer"></div><button type="button" class="v-btn v-btn--slim v-theme--light text-primary v-btn--density-default rounded-xl v-btn--size-default v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
       <!----><span class="v-btn__content" data-no-activator=""> Cancel </span>
diff --git a/vuetify.config.ts b/vuetify.config.ts
index 94a2cbb..600698f 100644
--- a/vuetify.config.ts
+++ b/vuetify.config.ts
@@ -7,9 +7,6 @@ export default defineVuetifyConfiguration({
     locale: 'zhHans',
     fallback: 'en',
   },
-  icons: {
-    defaultSet: 'mdi-svg',
-  },
   localeMessages: ['zhHans', 'en'],
   defaults: {
     VSwitch: {