refactor: Icons Type Declarations

components.d.ts

@@ -8,9 +8,9 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     DefineRender: typeof import('./src/components/vue-macros/DefineRender.vue')['default']
-    ICarbonFaceCool: typeof import('~icons/carbon/face-cool')['default']
+    IconCarbonFaceCool: typeof import('~icons/carbon/face-cool')['default']
     Icons: typeof import('./src/components/Icons.vue')['default']
-    ISvgPacman: typeof import('~icons/svg/pacman')['default']
+    IconSvgPacman: typeof import('~icons/svg/pacman')['default']
     ReactivityTransform: typeof import('./src/components/vue-macros/ReactivityTransform.vue')['default']
     ReusableTemplate: typeof import('./src/components/ReusableTemplate.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/Icons.vue

@@ -9,7 +9,7 @@
 
     <div b="1px solid pink">
       <div>Icons({ autoInstall: true })</div>
-      <i-carbon-face-cool class="text-yellow" w-32 h-32 />
+      <icon-carbon-face-cool class="text-yellow" w-32 h-32 />
     </div>
 
     <div b="1px solid pink">
@@ -19,12 +19,12 @@
 
     <div b="1px solid pink">
       <div>pacman.svg</div>
-      <!-- FIXME: [unocss] failed to load icon "svg-pacman" -->
-      <i-svg-pacman text-blue w-48 h-48 />
+      <icon-svg-pacman text-blue w-48 h-48 />
+      <some-icon text-cyan w-48 h-48 />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-//
+import SomeIcon from '~icons/svg/pacman';
 </script>

src/components/vue-macros/ReactivityTransform.vue

@@ -1,4 +1,5 @@
 <script setup>
+// https://vue-macros.dev/zh-CN/features/reactivity-transform.html
 let count = $ref(0);
 
 console.log(count);

src/types/env.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="vite/client" />
 /// <reference types="unplugin-vue-router/client" />
-/* /// <reference types="@vue-macros/reactivity-transform/macros-global" /> */
 /// <reference types="unplugin-vue-macros/macros-global" />
+/// <reference types="unplugin-icons/types/vue" />

vite.config.ts

@@ -2,7 +2,6 @@ import { unheadVueComposablesImports } from '@unhead/vue';
 import { VantResolver } from '@vant/auto-import-resolver';
 import Vue from '@vitejs/plugin-vue';
 import VueJsx from '@vitejs/plugin-vue-jsx';
-import ReactivityTransform from '@vue-macros/reactivity-transform/vite';
 import { fileURLToPath, URL } from 'node:url';
 import UnoCSS from 'unocss/vite';
 import AutoImport from 'unplugin-auto-import/vite';
@@ -69,7 +68,6 @@ function Plugins() {
     }), // https://vue-macros.dev/zh-CN/guide/bundler-integration.html
     UnoCSS(),
     Markdown({ headEnabled: true }),
-    ReactivityTransform(), // https://vue-macros.dev/zh-CN/features/reactivity-transform.html
   );
 
   plugins.push(
@@ -92,6 +90,7 @@ function Plugins() {
       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
       resolvers: [
         IconsResolver({
+          prefix: 'icon',
           customCollections: ['svg'],
         }), // https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#auto-importing
         TDesignResolver({ library: 'mobile-vue', esm: true }),