修改vue-element-admin侧边栏图标颜色

下载运行项目

首先把vue-element-admin下载到本地，这里是在基础模板上开发的，直接下载基础模板代码

npm install 下载相关依赖
npm run dev 运行项目

Svg Icon 图标

官网有提到，svg图标是一个全局 Svg Icon 图标组件。默认在 @/icons 中注册到全局中，可以在项目中任意地方使用。所以图标均可在 @/icons/svg。可自行添加或者删除图标，所有图标都会被自动导入，无需手动操作。

改变svg图标颜色

svg-icon 默认会读取其父级的 color ，因为设置了fill: currentColor属性;

1.你可以改变父级的color，svg与父级的color一样
2.或者直接改变fill的颜色即可。svg就是你改变的fill颜色

侧边栏图标

在view下创建文件sysIcon，sysIcon下创建文件test和test2，在router/idnex.js添加该菜单：

{
    path: '/sysIcon',
    component: Layout,
    redirect: '/sysIcon/test',
    name: 'sysIcon',
    meta: {
      title: '系统图标',
      icon: 'svg-icon'
    },
    children: [
      {
        path: 'test',
        component: () => import('@/views/sysIcon/test/index'), // Parent router-view
        name: 'test',
        meta: { title: 'svg图标' },
      },
      {
        path: 'test2',
        component: () => import('@/views/sysIcon/test2/index'), // Parent router-view
        name: 'test2',
        meta: { title: '普通图标' },
      },
    ]
  },

title=系统图标是一级菜单名称，icon=svg-icon是该一级菜单对应的图标。可以看到添加到侧边栏成功：

此时我们的一级菜单还没显示对应图标，我们需要把svg-icon添加到src/icons/svg路径下，打开Adobe XD，选中UI提供的图标-导出-选择svg，这个时候记得选择轮廓话描边，如下：

注意：如果不选择轮廓化描边，最后一步不能成功。

此时我们的侧边栏已经显示出对应的图标了，但是会发现颜色不会跟随着文字发生变化（仔细看，没有和文字一样高亮白）

最后一步：找到这个svg，全局搜索fill，把这个属性去掉。正是因为这个fill写死了color样式，所以svg图标不能够根据父级color颜色变化而变化

我们的侧边栏图标就已经可以跟随父级的color颜色变化了（仔细看，真的高亮白色了）。

PS

在vue-element-admin上开发的时候，如果设置修改了sidebar-logo-container的高度

.sidebar-logo-container {
  width: 100%;
  height: 90px;
  }

在侧边栏的菜单滑动样式里就要修改减去相同的高度，如果不减，侧边栏过多的时候，或者展开太长的时候，会隐藏掉底部的菜单内容，无法显示完全。