菜单图标修改

src/components/MenuTree/index.vue

@@ -1,19 +1,19 @@
 <template>
   <el-submenu  v-if="menu.children && menu.children.length >= 1" :index="menu.id.toString()">
     <template class="firstMenu" slot="title">
-      <i :class="menu.icon" ></i>
-      <!-- <svg class="icon" aria-hidden="true">
-        <use :xlink:href="menu.icon"></use>
-    </svg> -->
+      <!-- <i :class="menu.icon" ></i> -->
+      <svg aria-hidden="true"  style="    width: 20px;height: 20px;" >
+        <use :href="`#${menu.icon}`"></use>
+    </svg>
       <span slot="title" class="firstMenu" >{{menu.name}}</span>
     </template>
     <MenuTree v-for="item in menu.children" :key="item.id" :menu="item"></MenuTree>
   </el-submenu>
   <el-menu-item v-else :index="menu.id.toString()" @click="handleRoute(menu)">
-    <i :class="menu.icon"></i>
-    <!-- <svg aria-hidden="true"  style="    width: 20px;height: 20px;" >
-      <use xlink:href="#icon-chexianludan-yixuanzhong"></use>
-  </svg> -->
+    <!-- <i :class="menu.icon"></i> -->
+    <svg aria-hidden="true"  style="    width: 20px;height: 20px;" >
+        <use :href="`#${menu.icon}`"></use>
+    </svg>
     <span slot="title">{{menu.name}}</span>
   </el-menu-item>
 </template>
@@ -52,13 +52,15 @@ export default {
 .el-menu-item.is-active {
   // background-color: #428BCA !important;
 
-      background-color:#D42426 !important;
+      background-color: var(--themeColor) !important;
     }
 // .el-submenu i,.el-submenu span, .el-menu-item i,.el-menu-item span{
 //   color:#fff;
 // }
 // :deep.el-menu-item.is-active{
-//   background-color: #428BCA !important;
+//   background-color: #428BCA !important;     
 // }
-// .el-menu-item.is-active i
+.is-active svg{
+  filter: brightness(100);
+} 
 </style>