refactor: ♻️ 移除 vicons 使用 unocss 的 icons preset 以获得纯 css icon

package.json

@@ -41,9 +41,6 @@
   "dependencies": {
     "@types/lodash-es": "^4.17.12",
     "@unocss/reset": "^0.58.5",
-    "@vicons/antd": "^0.12.0",
-    "@vicons/ionicons5": "^0.12.0",
-    "@vicons/utils": "^0.1.4",
     "@vueuse/core": "^10.7.0",
     "axios": "^1.4.0",
     "date-fns": "^3.0.6",
@@ -61,6 +58,7 @@
     "@antfu/eslint-config": "^2.6.3",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@iconify/json": "^2.2.188",
     "@types/fs-extra": "^11.0.4",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^20.10.5",

pnpm-lock.yaml

@@ -67,6 +67,9 @@ devDependencies:
   '@commitlint/config-conventional':
     specifier: ^18.4.3
     version: 18.4.3
+  '@iconify/json':
+    specifier: ^2.2.188
+    version: 2.2.188
   '@types/fs-extra':
     specifier: ^11.0.4
     version: 11.0.4
@@ -1292,6 +1295,13 @@ packages:
     resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
     dev: true
 
+  /@iconify/json@2.2.188:
+    resolution: {integrity: sha512-gsJwZ60Vb5IrtjYu+Al4qMaML9ZKUnop6Gi0537ZcA6nEhe3Nb58WH4c6b1+mXOHwOkFlLA8AFBXJUHY5nKMdA==}
+    dependencies:
+      '@iconify/types': 2.0.0
+      pathe: 1.1.2
+    dev: true
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true

src/layout/index.vue

@@ -23,9 +23,10 @@
         :key="menu.name"
         replace
         :to="menu.path"
-        :icon="(menu.meta?.icon as string)"
       >
-        {{ menu.meta?.title }}
+        <template #icon>
+          <i :class="menu.meta?.icon" />
+        </template>
       </van-tabbar-item>
     </van-tabbar>
   </div>

src/router/modules.ts

@@ -10,7 +10,7 @@ const routeModuleList: Array<RouteRecordRaw> = [
     component: Layout,
     meta: {
       title: '主控台',
-      icon: 'wap-home',
+      icon: 'i-simple-icons:atlassian',
     },
     children: [
       {
@@ -29,8 +29,8 @@ const routeModuleList: Array<RouteRecordRaw> = [
     redirect: '/message/index',
     component: Layout,
     meta: {
-      title: '消息',
+      title: '图表',
-      icon: 'chat',
+      icon: 'i-simple-icons:soundcharts',
     },
     children: [
       {
@@ -50,7 +50,7 @@ const routeModuleList: Array<RouteRecordRaw> = [
     component: Layout,
     meta: {
       title: '我的',
-      icon: 'manager',
+      icon: 'i-simple-icons:docsify',
     },
     children: [
       {

src/views/dashboard/index.vue

@@ -5,7 +5,6 @@
       <div class="text-darkBlue dark:text-garyWhite mb-4 mt-12 text-center text-2xl font-black">
         {{ title }}
       </div>
-
       <div class="mb-6 mt-4 w-full">
         <van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
           <van-swipe-item

src/views/login/ForgetPasswordForm.vue

@@ -8,9 +8,7 @@
       :rules="getFormRules.username"
     >
       <template #left-icon>
-        <Icon>
+        <i class="i-ph:user-bold mr-2 text-lg" />
-          <UserOutlined />
-        </Icon>
       </template>
     </van-field>
 
@@ -22,9 +20,7 @@
       :rules="getFormRules.mobile"
     >
       <template #left-icon>
-        <Icon>
+        <i class="i-ic:twotone-smartphone mr-2 text-lg" />
-          <MobileOutlined />
-        </Icon>
       </template>
     </van-field>
 
@@ -37,9 +33,7 @@
       :rules="getFormRules.sms"
     >
       <template #left-icon>
-        <Icon>
+        <i class="i-material-symbols:edit-square-outline-rounded mr-2 text-lg" />
-          <EditOutlined />
-        </Icon>
       </template>
       <template #button>
         <van-button size="small" type="primary">
@@ -72,8 +66,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref, unref } from 'vue'
 import type { FormInstance } from 'vant'
-import { Icon } from '@vicons/utils'
-import { EditOutlined, MobileOutlined, UserOutlined } from '@vicons/antd'
 import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
 
 const { handleBackLogin, getLoginState } = useLoginState()

src/views/login/LoginForm.vue

@@ -8,9 +8,7 @@
       :rules="getFormRules.username"
     >
       <template #left-icon>
-        <Icon>
+        <i class="i-ph:user-bold mr-2 text-lg" />
-          <UserOutlined />
-        </Icon>
       </template>
     </van-field>
     <van-field
@@ -23,17 +21,11 @@
       @click-right-icon="switchPassType = !switchPassType"
     >
       <template #left-icon>
-        <Icon>
+        <i class="i-iconamoon:lock-bold mr-2 text-lg" />
-          <LockOutlined />
-        </Icon>
       </template>
       <template #right-icon>
-        <Icon v-if="switchPassType">
+        <i v-if="switchPassType" class="i-mdi:eye-outline mr-2 text-lg" />
-          <EyeInvisibleOutlined />
+        <i v-else class="i-mdi:eye-off mr-2 text-lg" />
-        </Icon>
-        <Icon v-else>
-          <EyeOutlined />
-        </Icon>
       </template>
     </van-field>
 
@@ -71,8 +63,6 @@ import { computed, onMounted, reactive, ref, unref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { showFailToast, showLoadingToast, showSuccessToast } from 'vant'
 import type { FormInstance } from 'vant'
-import { Icon } from '@vicons/utils'
-import { EyeInvisibleOutlined, EyeOutlined, LockOutlined, UserOutlined } from '@vicons/antd'
 import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
 import { useUserStore } from '@/store/modules/user'
 import { ResultEnum } from '@/enums/httpEnum'

src/views/login/LoginTitle.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col items-center justify-center">
-    <div class="logo enter-y mb-2 mt-8">
+    <div class="logo enter-y mb-8 mt-8">
       <SvgIcon class="!h-30 !w-30" name="logo" />
     </div>
-    <div class="text-darkBlue dark:text-garyWhite enter-y mb-8 text-2xl font-black">
+    <div class="text-darkBlue dark:text-garyWhite enter-y mb-12 text-2xl font-black">
       {{ title }}
     </div>
   </div>

src/views/login/RegisterForm.vue

@@ -9,9 +9,7 @@
         :rules="getFormRules.username"
       >
         <template #left-icon>
-          <Icon>
+          <i class="i-ph:user-bold mr-2 text-lg" />
-            <UserOutlined />
-          </Icon>
         </template>
       </van-field>
 
@@ -23,9 +21,7 @@
         :rules="getFormRules.mobile"
       >
         <template #left-icon>
-          <Icon>
+          <i class="i-ic:twotone-smartphone mr-2 text-lg" />
-            <MobileOutlined />
-          </Icon>
         </template>
       </van-field>
 
@@ -38,9 +34,7 @@
         :rules="getFormRules.sms"
       >
         <template #left-icon>
-          <Icon>
+          <i class="i-material-symbols:edit-square-outline-rounded mr-2 text-lg" />
-            <EditOutlined />
-          </Icon>
         </template>
         <template #button>
           <van-button size="small" type="primary">
@@ -59,17 +53,11 @@
         @click-right-icon="switchPassType = !switchPassType"
       >
         <template #left-icon>
-          <Icon>
+          <i class="i-iconamoon:lock-bold mr-2 text-lg" />
-            <LockOutlined />
-          </Icon>
         </template>
         <template #right-icon>
-          <Icon v-if="switchPassType">
+          <i v-if="switchPassType" class="i-mdi:eye-outline mr-2 text-lg" />
-            <EyeInvisibleOutlined />
+          <i v-else class="i-mdi:eye-off mr-2 text-lg" />
-          </Icon>
-          <Icon v-else>
-            <EyeOutlined />
-          </Icon>
         </template>
       </van-field>
 
@@ -83,17 +71,11 @@
         @click-right-icon="switchConfirmPassType = !switchConfirmPassType"
       >
         <template #left-icon>
-          <Icon>
+          <i class="i-iconamoon:lock-bold mr-2 text-lg" />
-            <LockOutlined />
-          </Icon>
         </template>
         <template #right-icon>
-          <Icon v-if="switchConfirmPassType">
+          <i v-if="switchConfirmPassType" class="i-mdi:eye-outline mr-2 text-lg" />
-            <EyeInvisibleOutlined />
+          <i v-else class="i-mdi:eye-off mr-2 text-lg" />
-          </Icon>
-          <Icon v-else>
-            <EyeOutlined />
-          </Icon>
         </template>
       </van-field>
 
@@ -135,15 +117,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, unref } from 'vue'
 import type { FormInstance } from 'vant'
-import { Icon } from '@vicons/utils'
+
-import {
-  EditOutlined,
-  EyeInvisibleOutlined,
-  EyeOutlined,
-  LockOutlined,
-  MobileOutlined,
-  UserOutlined,
-} from '@vicons/antd'
 import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
 
 const { handleBackLogin, getLoginState } = useLoginState()

src/views/my/index.vue

@@ -22,41 +22,31 @@
 
       <van-cell :border="false" title="个人信息" is-link to="/editUserInfo">
         <template #icon>
-          <Icon>
+          <i class="i-mingcute:idcard-fill mr-2 text-xl" />
-            <IdcardFilled />
-          </Icon>
         </template>
       </van-cell>
 
       <van-cell :border="false" title="账号与安全" is-link to="/accountSetting">
         <template #icon>
-          <Icon>
+          <i class="i-material-symbols:account-box mr-2 text-xl" />
-            <Person />
-          </Icon>
         </template>
       </van-cell>
 
       <van-cell :border="false" title="主题设置" is-link to="/themeSetting">
         <template #icon>
-          <Icon>
+          <i class="i-material-symbols:palette mr-2 text-xl" />
-            <ColorPalette />
-          </Icon>
         </template>
       </van-cell>
 
       <van-cell :border="false" title="隐私政策" is-link>
         <template #icon>
-          <Icon>
+          <i class="i-material-symbols:list-alt-rounded mr-2 text-xl" />
-            <DocumentText />
-          </Icon>
         </template>
       </van-cell>
 
       <van-cell :border="false" title="退出登录" is-link @click="showLogoutAction = true">
         <template #icon>
-          <Icon>
+          <i class="i-solar:logout-3-bold mr-2 text-xl" />
-            <LogOut />
-          </Icon>
         </template>
       </van-cell>
 
@@ -74,9 +64,6 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { Icon } from '@vicons/utils'
-import { IdcardFilled } from '@vicons/antd'
-import { ColorPalette, DocumentText, LogOut, Person } from '@vicons/ionicons5'
 import { showToast } from 'vant'
 import { useUserStore } from '@/store/modules/user'
 
@@ -102,7 +89,7 @@ const getUserCoverBg = computed(() => {
 </script>
 
 <style lang="less" scoped>
-  .my-bg {
+.my-bg {
   clip-path: inset(0 -55% 0 -55% round 0 0 100% 100%);
   background-size: cover;
 
@@ -125,9 +112,5 @@ const getUserCoverBg = computed(() => {
   &:active {
     background-color: var(--van-cell-active-color);
   }
-
-  .xicon {
-    margin-right: 10px;
-  }
 }
 </style>

uno.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
 
     // 图标预设: https://unocss.dev/presets/icons
     presetIcons({
-      cdn: 'https://esm.sh/',
+      // cdn: 'https://esm.sh/',
       extraProperties: {
         'display': 'inline-block',
         'vertical-align': 'middle',
@@ -68,4 +68,15 @@ export default defineConfig({
     'text-overflow': 'overflow-hidden whitespace-nowrap text-ellipsis', // 文本溢出显示省略号
     'text-break': 'whitespace-normal break-all break-words', // 文本溢出换行
   },
+
+  // 由于 UnoCSS 在构建时工作，这意味着只会生成静态呈现的 icon 并将其发送到你的组件中
+  // 通过模板字符串 :class="menu.meta?.icon" 来动态生成 CSS 类名。
+  // 这个类名是在运行时计算的，UnoCSS 在构建时无法知道 menu.meta?.icon 的具体值，
+  // 因此无法生成对应的 CSS。为了解决这个问题，你可以使用 UnoCSS 的 safelist 选项来指定一些始终需要生成的 CSS 类。
+  // https://unocss.dev/guide/advanced#safelist
+  safelist: [
+    'i-simple-icons:atlassian',
+    'i-simple-icons:soundcharts',
+    'i-simple-icons:docsify',
+  ],
 })