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

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

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

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

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

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

title=系统图标是一级菜单名称，icon=svg-icon是该一级菜单对应的图标。可以看到添加到侧边栏成功： 此时我们的一级菜单还没显示对应图标，我们需要把svg-icon添加到src/icons/svg路径下，打开Adobe XD，选中UI提供的图标-导出-选择svg，这个时候记得选择轮廓话描边，如下：

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

此时我们的侧边栏已经显示出对应的图标了，但是会发现颜色不会跟随着文字发生变化（仔细看，没有和文字一样高亮白） 最后一步：找到这个svg，全局搜索fill，把这个属性去掉。正是因为这个fill写死了color样式，所以svg图标不能够根据父级color颜色变化而变化

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

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

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