若依框架修改菜单栏svg图标颜色

业务需求：针对右侧菜单栏，每一个菜单栏是一种颜色，当鼠标移入或者点击时加上渐变色块，同时文字与图表变为白色

遇到的问题：从ui图片切出来的图标，放在代码中，发现图标不能随着css样式变换颜色

解决办法：

①将下载下来的svg图表右键用记事本打开

②用代码编辑器打开打开后的内容，ctrl+f来搜索；将第一行的fill中的内容变为currentColor，其余fill都删除

之后在代码修改右侧菜单颜色

遇到的问题：有无子菜单的顺序样式

①找到sidebar.scss样式文件

针对首页菜单样式修改

.submenu-title-noDropdown{
  span{
    color: rgba(255, 235, 59, 1);
    font-size: 24px;
  }
  .svg-icon{
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.3em;
    color: rgba(255, 235, 59, 1);
  }
  &:hover {
    background: linear-gradient(90deg, rgba(255, 235, 59, 1) 0%, rgba(255, 235, 59, 0) 100%);
    span{
      color: #fff !important;
      font-size: 24px;
    }
    .svg-icon{
      width: 1.2em;
      height: 1.2em;
      vertical-align: -0.3em;
      color: rgba(255, 255, 255, 1);
    }
  }
}
.submenu-title-noDropdown.is-active{
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255, 235, 59, 1) 0%, rgba(255, 235, 59, 0) 100%);
  span{
    color: #fff !important;
    font-size: 24px;
  }
  .svg-icon{
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.3em;
    color: rgba(255, 255, 255, 1);
  }
}
​

当第二个菜单有子菜单时

.el-menu[role='menubar'] > div:nth-child(2) > li{
  & > .el-submenu__title{
    span{
      color: rgba(255, 195, 0, 1);
      font-size: 24px;
    }
    .svg-icon{
      width: 1.2em;
      height: 1.2em;
      vertical-align: -0.3em;
      color: rgba(255, 195, 0, 1);
    }
    .el-icon-arrow-down{
      color: rgba(255, 195, 0, 1);
      margin-top: -3px;
    }
    &:hover {
      background: linear-gradient(90deg, rgba(255, 195, 0, 1) 0%, rgba(255, 195, 0, 0) 100%);
      span{
        color: #fff !important;
        font-size: 24px;
      }
      .svg-icon{
        width: 1.2em;
        height: 1.2em;
        vertical-align: -0.3em;
        color: rgba(255, 255, 255, 1);
      }
      .el-icon-arrow-down{
        color: rgba(255, 255, 255, 1);
        margin-top: -3px;
      }
    }
  }
  & > .el-menu .el-menu-item.is-active{
    color: rgba(255, 195, 0, 1) !important;
  }
}

当除首页以外的菜单没有子菜单时，样式代码

.el-menu[role='menubar'] > div:nth-child(3) {
      & .submenu-title-noDropdown{
        span{
          color: rgba(209, 147, 237, 1);
          font-size: 24px;
        }
        .svg-icon{
          width: 1.2em;
          height: 1.2em;
          vertical-align: -0.3em;
          color: rgba(209, 147, 237, 1);
        }
        &:hover {
          background: linear-gradient(90deg, rgba(209, 147, 237, 1) 0%, rgba(255, 235, 59, 0) 100%);
          span{
            color: #fff !important;
            font-size: 24px;
          }
          .svg-icon{
            width: 1.2em;
            height: 1.2em;
            vertical-align: -0.3em;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
      & .submenu-title-noDropdown.is-active{
        border-radius: 16px;
        background: linear-gradient(90deg, rgba(209, 147, 237, 1) 0%, rgba(255, 235, 59, 0) 100%);
        span{
          color: #fff !important;
          font-size: 24px;
        }
        .svg-icon{
          width: 1.2em;
          height: 1.2em;
          vertical-align: -0.3em;
          color: rgba(255, 255, 255, 1);
        }
      }
    }