feat: update

mock/asyncRoutes.ts

@@ -7,7 +7,7 @@ const systemRouter = {
   name: "system",
   redirect: "/system/user",
   meta: {
-    icon: "el-icon-setting",
+    icon: "Setting",
     title: "message.hssysManagement",
     showLink: true,
     rank: 6
@@ -38,7 +38,7 @@ const permissionRouter = {
   redirect: "/permission/page",
   meta: {
     title: "message.permission",
-    icon: "el-icon-lollipop",
+    icon: "Lollipop",
     showLink: true,
     rank: 3
   },

package.json

@@ -29,7 +29,7 @@
     "cropperjs": "^1.5.11",
     "dayjs": "^1.10.7",
     "echarts": "^5.2.1",
-    "element-plus": "1.1.0-beta.24",
+    "element-plus": "1.2.0-beta.1",
     "element-resize-detector": "^1.2.3",
     "font-awesome": "^4.7.0",
     "lodash-es": "^4.17.21",

src/layout/components/sidebar/sidebarItem.vue

@@ -57,12 +57,13 @@ function resolvePath(routePath) {
       :class="{ 'submenu-title-noDropdown': !isNest }"
       style="display: flex; align-items: center"
     >
-      <i
+      <el-icon v-show="props.item.meta.icon">
-        v-show="props.item.meta.icon"
+        <component
-        :class="
+          :is="
-          onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
+            onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
-        "
+          "
-      />
+        ></component>
+      </el-icon>
       <template #title>
         <div style="display: flex; align-items: center">
           <span>{{ $t(onlyOneChild.meta.title) }}</span>
@@ -83,7 +84,9 @@ function resolvePath(routePath) {
     popper-append-to-body
   >
     <template #title>
-      <i v-show="props.item.meta.icon" :class="props.item.meta.icon"></i>
+      <el-icon v-show="props.item.meta.icon">
+        <component :is="props.item.meta && props.item.meta.icon"></component>
+      </el-icon>
       <span>{{ $t(props.item.meta.title) }}</span>
       <Icon
         v-if="props.item.meta.extraIcon"

src/plugins/element-plus/index.ts

@@ -38,7 +38,18 @@ import {
 } from "element-plus";
 
 // https://element-plus.org/zh-CN/component/icon.html
-import { Check } from "@element-plus/icons";
+import {
+  Check,
+  Menu,
+  HomeFilled,
+  SetUp,
+  Edit,
+  Setting,
+  Lollipop,
+  Link,
+  Position,
+  Histogram
+} from "@element-plus/icons";
 
 const components = [
   ElTag,
@@ -75,7 +86,18 @@ const components = [
   ElDescriptions,
   ElDescriptionsItem,
   ElBacktop,
-  Check
+
+  // icon
+  Check,
+  Menu,
+  HomeFilled,
+  SetUp,
+  Edit,
+  Setting,
+  Lollipop,
+  Link,
+  Position,
+  Histogram
 ];
 
 const plugins = [ElLoading];

src/router/modules/components.ts

@@ -6,7 +6,7 @@ const componentsRouter = {
   component: Layout,
   redirect: "/components/split-pane",
   meta: {
-    icon: "el-icon-menu",
+    icon: "Menu",
     title: "message.hscomponents",
     showLink: true,
     rank: 4

src/router/modules/editor.ts

@@ -6,7 +6,7 @@ const editorRouter = {
   component: Layout,
   redirect: "/editor/index",
   meta: {
-    icon: "el-icon-edit-outline",
+    icon: "Edit",
     title: "message.hseditor",
     showLink: true,
     rank: 2

src/router/modules/error.ts

@@ -6,7 +6,7 @@ const errorRouter = {
   component: Layout,
   redirect: "/error/401",
   meta: {
-    icon: "el-icon-position",
+    icon: "Position",
     title: "message.hserror",
     showLink: true,
     rank: 7

src/router/modules/externalLink.ts

@@ -5,7 +5,7 @@ const externalLink = {
   name: "external",
   component: Layout,
   meta: {
-    icon: "el-icon-link",
+    icon: "Link",
     title: "message.externalLink",
     showLink: true,
     rank: 190
@@ -14,7 +14,6 @@ const externalLink = {
     {
       path: "https://github.com/xiaoxian521/vue-pure-admin",
       meta: {
-        icon: "el-icon-link",
         title: "message.externalLink",
         showLink: true,
         rank: 191

src/router/modules/flowchart.ts

@@ -6,7 +6,7 @@ const flowChartRouter = {
   component: Layout,
   redirect: "/flowChart/index",
   meta: {
-    icon: "el-icon-set-up",
+    icon: "SetUp",
     title: "message.hsflowChart",
     showLink: true,
     rank: 1

src/router/modules/home.ts

@@ -6,7 +6,7 @@ const homeRouter = {
   component: Layout,
   redirect: "/welcome",
   meta: {
-    icon: "el-icon-s-home",
+    icon: "HomeFilled",
     showLink: true,
     rank: 0
   },

src/router/modules/nested.ts

@@ -7,7 +7,7 @@ const nestedRouter = {
   name: "Nested",
   meta: {
     title: "message.hsmenus",
-    icon: "el-icon-s-data",
+    icon: "Histogram",
     showLink: true,
     rank: 5
   },

src/router/modules/remaining.ts

@@ -26,7 +26,7 @@ const remainingRouter = [
     name: "redirect",
     component: Layout,
     meta: {
-      icon: "el-icon-s-home",
+      icon: "HomeFilled",
       title: "message.hshome",
       showLink: false,
       rank: 104

src/style/sidebar.scss

@@ -24,6 +24,10 @@
     }
   }
 
+  .el-sub-menu__icon-arrow {
+    position: absolute;
+  }
+
   .main-container {
     height: 100vh;
     min-height: 100%;