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