feat: Add unocss preset icons

Author: cwandev

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "Vue.volar",
     "antfu.unocss",
     "simonhe.common-intellisense",
-    "lokalise.i18n-ally"
+    "lokalise.i18n-ally",
+    "antfu.iconify"
   ]
 }

package.json

@@ -37,6 +37,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "2.12.1",
+    "@iconify-json/carbon": "^1.1.31",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.12.3",

pnpm-lock.yaml

@@ -5,11 +5,17 @@ const active = ref(0)
 
 <template>
   <van-tabbar v-model="active" route>
-    <van-tabbar-item replace icon="home-o" to="/">
+    <van-tabbar-item replace to="/">
       {{ t('layouts.home') }}
+      <template #icon>
+        <div class="i-carbon:home" />
+      </template>
     </van-tabbar-item>
-    <van-tabbar-item replace icon="user-circle-o" to="/profile">
+    <van-tabbar-item replace to="/profile">
       {{ t('layouts.profile') }}
+      <template #icon>
+        <div class="i-carbon:user" />
+      </template>
     </van-tabbar-item>
   </van-tabbar>
 </template>

src/components/TabBar.vue

@@ -1,4 +1,11 @@
-import { defineConfig, presetAttributify, presetMini, presetUno } from 'unocss'
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetMini,
+  presetUno,
+} from 'unocss'
+
 import presetRemToPx from '@unocss/preset-rem-to-px'
 
 // 刚使用unocss的朋友，可以借助这个工具： https://to-unocss.netlify.app
@@ -7,6 +14,7 @@ export default defineConfig({
   presets: [
     presetUno,
     presetAttributify,
+    presetIcons(),
     // 为什么要用到这个插件？
     // 模板使用 viewport 作为移动端适配方案，unocss 默认单位为 rem
     // 所以需要转成 px，然后由 postcss 把 px 转成 vw/vh，完成适配