From 12247e7bfeaf2c8b9a59127ab6944fa74b549161 Mon Sep 17 00:00:00 2001
From: webfansplz <webfansplz@gmail.com>
Date: Wed, 20 Dec 2023 00:12:31 +0800
Subject: [PATCH] feat(client): setup unocss runtime to load icon dynamically

---
 packages/client/package.json                |  2 ++
 packages/client/src/App.vue                 |  2 ++
 packages/client/src/setup/unocss-runtime.ts | 21 +++++++++++++++++++++
 pnpm-lock.yaml                              | 14 ++++++++++++++
 4 files changed, 39 insertions(+)
 create mode 100644 packages/client/src/setup/unocss-runtime.ts

diff --git a/packages/client/package.json b/packages/client/package.json
index 54e365f5..96fc2909 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -24,6 +24,8 @@
     "vite": "^3.1.0 || ^4.0.0-0 || ^5.0.0-0"
   },
   "dependencies": {
+    "@unocss/preset-icons": "^0.58.0",
+    "@unocss/runtime": "^0.58.0",
     "@vue-devtools-next/core": "workspace:^",
     "@vue-devtools-next/kit": "workspace:^",
     "@vue-devtools-next/schema": "workspace:*",
diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index fbe2f2b4..847dd434 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -4,6 +4,8 @@ import { useDevToolsBridge, useDevToolsState } from '@vue-devtools-next/core'
 import { isInChromePanel } from '@vue-devtools-next/shared'
 import { Pane, Splitpanes } from 'splitpanes'
 
+import('./setup/unocss-runtime')
+
 // @TODO: fix browser extension cross-origin localStorage issue
 useColorMode()
 const router = useRouter()
diff --git a/packages/client/src/setup/unocss-runtime.ts b/packages/client/src/setup/unocss-runtime.ts
new file mode 100644
index 00000000..7ff113d3
--- /dev/null
+++ b/packages/client/src/setup/unocss-runtime.ts
@@ -0,0 +1,21 @@
+// @ts-expect-error missin types
+import presetIcons from '@unocss/preset-icons/browser'
+import init from '@unocss/runtime'
+
+init({
+  defaults: {
+    presets: [
+      presetIcons({
+        prefix: ['i-', ''],
+        collections: {},
+        cdn: 'https://esm.sh/',
+        scale: 1.2,
+        extraProperties: {
+          'display': 'inline-block',
+          'vertical-align': 'middle',
+        },
+      }),
+    ],
+  },
+  bypassDefined: true,
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 13d27db0..56d8336e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,6 +135,12 @@ importers:
 
   packages/client:
     dependencies:
+      '@unocss/preset-icons':
+        specifier: ^0.58.0
+        version: 0.58.0
+      '@unocss/runtime':
+        specifier: ^0.58.0
+        version: 0.58.0
       '@vue-devtools-next/core':
         specifier: workspace:^
         version: link:../core
@@ -3744,6 +3750,14 @@ packages:
       '@unocss/core': 0.58.0
       magic-string: 0.30.5
 
+  /@unocss/runtime@0.58.0:
+    resolution: {integrity: sha512-z9BiLGX2/W8DN4gcWHlovh0i2GQdCDz06tGF6oQdgesr+A0isEcLzLde7PNlhdoZRH7hv0STl1qT4vb01mQE1w==}
+    dependencies:
+      '@unocss/core': 0.58.0
+      '@unocss/preset-attributify': 0.58.0
+      '@unocss/preset-uno': 0.58.0
+    dev: false
+
   /@unocss/scope@0.58.0:
     resolution: {integrity: sha512-XgUXZJvbxWSRC/DNOWI5DYdR6Nd6IZxsE5ls3AFA5msgtk5OH4YNQELLMabQw7xbRbU/fftlRJa3vncSfOyl6w==}