【vueelementadmin】侧栏原始图标颜色一键指定

原始配置中&＃xff0c;并没有一键给图标配置颜色的属性&＃xff0c;所以自己根据需求添加了个
效果如图

第一步&＃xff1a;修改element-admin代码 :

位置&＃xff1a;layout/components/Sidebar/Item.vue 19行左右

//修改前的代码
if (icon) {if (icon.includes(&＃39;el-icon&＃39;)) {vnodes.push(<i class&＃61;{[icon, &＃39;sub-el-icon&＃39;]} />)} else {vnodes.push(<svg-icon icon-class&＃61;{icon}/>)}}
//修改后的代码
if (icon) {const arr &＃61; icon.split(&＃39; &＃39;)let color &＃61; &＃39;&＃39;if (arr.length &＃61;&＃61;&＃61; 2) {color &＃61; arr[1]}if (icon.includes(&＃39;el-icon&＃39;)) {vnodes.push(<i class&＃61;{[icon, &＃39;sub-el-icon&＃39;]} style&＃61;{&＃39;color:&＃39; &＃43; color}/>)} else {vnodes.push(<svg-icon icon-class&＃61;{icon}/>)}}


使用方法

在配置路由的时候 在指定icon时空格加颜色即可
meta: { title: &＃39;系统配置&＃39;, icon: &＃39;el-icon-document-copy 颜色&＃39;, noCache: true },