feat: update icon

Author: Allen-1998

package-lock.json

@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "16.2.4",
+    "@unocss/preset-rem-to-px": "0.45.1",
     "@types/node": "17.0.23",
     "@types/nprogress": "0.2.0",
     "@typescript-eslint/eslint-plugin": "4.15.1",

package.json

@@ -2,13 +2,13 @@
   <template v-for="menu in menus" :key="menu.path">
     <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.path">
       <template #title>
-        <Icon :icon="menu.meta.icon" />
+        <div :class="[menu.meta.icon, 'mr10']" />
         <span>{{ lastItem(menu.meta.title) }}</span>
       </template>
       <TreeMenu :menus="menu.children"></TreeMenu>
     </el-sub-menu>
     <el-menu-item v-else :index="menu.path">
-      <Icon :icon="menu.meta.icon" />
+      <div :class="[menu.meta.icon, 'mr10']" />
       <template #title>{{ lastItem(menu.meta.title) }}</template>
     </el-menu-item>
   </template>

src/components/base/Icon.vue

@@ -2,10 +2,13 @@
   <div class="breadcrumb">
     <div class="flex items-center">
       <div class="collapse-icon" @click="updateCollapse">
-        <Icon
-          :icon="isCollapse ? 'foundation-indent-less' : 'foundation-indent-more'"
-          w="w30"
-          h="h30"
+        <div
+          :class="[
+            isCollapse ? 'foundation-indent-less' : 'foundation-indent-more',
+            'w30',
+            'h30',
+            'mx10',
+          ]"
         />
       </div>
       <el-breadcrumb separator="/">

src/components/base/TreeMenu.vue

@@ -1,34 +1,29 @@
-body {
-  margin: 0;
-}
-#app {
-  height: 100vh;
-  background: #fafafa;
-}
-a {
-  text-decoration: none;
-  color: #409eff;
-}
-.icon {
-  margin-right: 10px;
-  cursor: pointer;
-  font-size: 20px;
-}
-::-webkit-scrollbar {
-  /* 滚动条整体样式 */
-  width: 5px; /* 高宽分别对应横竖滚动条的尺寸 */
-  height: 5px;
-}
-::-webkit-scrollbar-track {
-  /* 滚动条里面轨道 */
-  border-radius: 5px;
-  background: #fafafa;
-}
-::-webkit-scrollbar-thumb {
-  /* 滚动条里面小方块 */
-  border-radius: 5px;
-  background: #dfdfdf;
-  &:hover {
-    background: #cfcfcf;
-  }
-}
+body {
+  margin: 0;
+}
+#app {
+  height: 100vh;
+  background: #fafafa;
+}
+a {
+  text-decoration: none;
+  color: #409eff;
+}
+::-webkit-scrollbar {
+  /* 滚动条整体样式 */
+  width: 5px; /* 高宽分别对应横竖滚动条的尺寸 */
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  /* 滚动条里面轨道 */
+  border-radius: 5px;
+  background: #fafafa;
+}
+::-webkit-scrollbar-thumb {
+  /* 滚动条里面小方块 */
+  border-radius: 5px;
+  background: #dfdfdf;
+  &:hover {
+    background: #cfcfcf;
+  }
+}

src/components/layout/Header.vue

@@ -8,7 +8,7 @@
     <div @click="updateName('333')">updateName</div>
     <el-button class="m10 w200 br10 c-#387">I am ElButton</el-button>
     <el-date-picker v-model="dateVal" type="date" placeholder="Pick a day" />
-    <Icon v-for="icon in icons" :key="icon" :icon="icon" />
+    <div v-for="icon in icons" :key="icon" :class="icon" />
     <div @click="getTest">getTest</div>
     <div @click="postTest">postTest</div>
     <div @click="setUserInfo({ name: 'allen', token: String(Math.random()) })">setUserInfo</div>
@@ -30,7 +30,7 @@ const { userInfo, setUserInfo } = useStore('user')
 
 const dateVal = ref(new Date())
 
-const icons = ['foundation-indent-more', 'foundation-indent-less', '']
+const icons = ['foundation-indent-more', 'foundation-indent-less']
 
 async function getTest() {
   const res = await apiTest.getTest({ a: 1 })

src/styles/base.scss

@@ -1,4 +1,5 @@
-import { defineConfig, presetAttributify, presetIcons, presetUno, Rule } from 'unocss'
+import presetRemToPx from '@unocss/preset-rem-to-px'
+import { defineConfig, Preset, presetAttributify, presetIcons, presetUno, Rule } from 'unocss'
 // https://github.com/unocss/unocss
 
 const sizeMapping: Record<string, string> = {
@@ -32,8 +33,15 @@ export const createConfig = () => {
       presetAttributify(),
       presetIcons({
         prefix: '',
-        // autoInstall: true,
+        extraProperties: {
+          display: 'inline-block',
+          cursor: 'pointer',
+          'font-size': '20px',
+        },
       }),
+      presetRemToPx({
+        baseFontSize: 4,
+      }) as Preset,
     ],
     include: [/\.vue$/, /pages.json$/],
     rules: getSizeRules(sizeMapping),