feat(client): setup unocss runtime to load icon dynamically

vuejs · Dec 19, 2023 · 12247e7 · 12247e7
1 parent 190503c
commit 12247e7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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