feat: support unplugin-icon-builder

varletjs · May 13, 2024 · 3e0577c · 3e0577c
1 parent 0fc4937
commit 3e0577c
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 58 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,4 +30,5 @@ coverage/
 components.d.ts
 auto-imports.d.ts
 typed-router.d.ts
-.eslintrc-auto-import.json
+.eslintrc-auto-import.json
+virtual.icons.css
diff --git a/env.d.ts b/env.d.ts
@@ -10,6 +10,8 @@ interface ImportMeta {
   readonly env: ImportMetaEnv
 }
 
+declare module 'virtual-icons' {}
+
 declare module 'vue' {
   interface ComponentCustomProperties {
     $dayjs: typeof dayjs

diff --git a/package.json b/package.json
@@ -36,16 +36,16 @@
     "vue-router": "^4.3.2"
   },
   "devDependencies": {
+    "@varlet/unplugin-icon-builder": "^0.2.1",
+    "@varlet/import-resolver": "^3.2.9",
+    "@varlet/preset-unocss": "3.1.3",
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
     "@iconify-json/mdi": "^1.1.54",
     "@types/node": "^20.2.5",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.59.8",
     "@unocss/preset-rem-to-px": "^0.58.2",
-    "@varlet/icon-builder": "^0.0.3",
-    "@varlet/import-resolver": "^3.2.9",
-    "@varlet/preset-unocss": "3.1.3",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "eslint": "^8.41.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/svg-icons/border-radius.svg → src/assets/icons/border-radius.svg b/src/svg-icons/border-radius.svg → src/assets/icons/border-radius.svg
diff --git a/src/assets/icons/css/i-icons.css b/src/assets/icons/css/i-icons.css
diff --git a/src/assets/icons/css/i-icons.less b/src/assets/icons/css/i-icons.less
diff --git a/src/assets/icons/fonts/i-icons-webfont.ttf b/src/assets/icons/fonts/i-icons-webfont.ttf
diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
diff --git a/src/main.ts b/src/main.ts
@@ -7,6 +7,7 @@ import dayjs from 'dayjs'
 import '@/styles/common.less'
 import '@varlet/touch-emulator'
 import 'virtual:uno.css'
+import 'virtual-icons'
 
 const app = createApp(App)
 

diff --git a/src/pages/layout.vue b/src/pages/layout.vue
@@ -6,6 +6,9 @@ const { toggleDark } = useDark()
 
 <template>
   <div class="container flex min-h-screen justify-center items-center mx-auto">
-    <var-button type="primary" @click="toggleDark">Toggle Theme</var-button>
+    <var-button type="primary" @click="toggleDark">
+      <span class="mr-4px">Toggle Theme</span>
+      <var-icon namespace="i" name="border-radius" />
+    </var-button>
   </div>
 </template>
diff --git a/vi.config.mjs b/vi.config.mjs
diff --git a/vite.config.ts b/vite.config.ts
@@ -3,6 +3,7 @@ import jsx from '@vitejs/plugin-vue-jsx'
 import autoImport from 'unplugin-auto-import/vite'
 import components from 'unplugin-vue-components/vite'
 import vueRouter from 'unplugin-vue-router/vite'
+import icon from '@varlet/unplugin-icon-builder/vite'
 import unoCSS from 'unocss/vite'
 import { fileURLToPath, URL } from 'node:url'
 import { VarletImportResolver } from '@varlet/import-resolver'
@@ -47,6 +48,8 @@ export default defineConfig({
 
     jsx(),
 
+    icon({ dir: 'src/assets/icons' }),
+
     components({
       resolvers: [VarletImportResolver()]
     }),