From b37ecb7251998238835f31f2494d0beac7a07aa0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Tue, 27 Aug 2024 17:20:31 +0800
Subject: [PATCH] refactor: Icons Type Declarations

---
 components.d.ts                                   | 4 ++--
 src/components/Icons.vue                          | 8 ++++----
 src/components/vue-macros/ReactivityTransform.vue | 1 +
 src/types/env.d.ts                                | 2 +-
 vite.config.ts                                    | 3 +--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 552104d..b29971e 100644
--- a/components.d.ts
+++ b/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']
diff --git a/src/components/Icons.vue b/src/components/Icons.vue
index 1a6761b..7ebe989 100644
--- a/src/components/Icons.vue
+++ b/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>
diff --git a/src/components/vue-macros/ReactivityTransform.vue b/src/components/vue-macros/ReactivityTransform.vue
index c83c09e..0899dfe 100644
--- a/src/components/vue-macros/ReactivityTransform.vue
+++ b/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);
diff --git a/src/types/env.d.ts b/src/types/env.d.ts
index fc60541..5b3c02c 100644
--- a/src/types/env.d.ts
+++ b/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" />
diff --git a/vite.config.ts b/vite.config.ts
index 48fbfba..a0eaa2b 100644
--- a/vite.config.ts
+++ b/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 }),