vue-element-admin 优雅的使用icon svgo的使用

vue-element-admin 优雅的使用icon  svgo的使用

最近重新下载了最新版本的vue-element-admin作为开发模板碰到了关于svg方面的问题

开发的时候直接导入了ui给的svg图，效果是这个样子

然后很happy的run 了下svgo，果然被优化了小了很多;ps:可以看下大佬的文章手摸手，带你优雅的使用 icon

然后发现效果居然变成了这样子

笑容逐渐消失；然后经过一系列的查看发现原来是因为关于icon颜色的修改问题，大佬去掉了填充色

具体可以去看下这边的回答https://github.com/PanJiaChen/vue-element-admin/issues/330

最简单粗暴的方法是注掉上述代码再run ,但是这样子可能导致之后只是颜色变化的icon不能复用，因为设置color并不奏效，

比较推荐的是乖乖的把之前用icon的地方加上color设置一下，当然大小还是可以通过font-size来设置的

 

另外总结了vue-element-admin的命令

# 本地环境启动

npm run dev

# 构建测试环境

npm run build:stage

# 构建生产环境

npm run build:prod

# 预览发布环境效果

npm run preview

# 预览发布环境效果 + 静态资源分析

npm run preview -- --report

# 代码格式检查并自动修复

npm run lint -- --fix

# 优化 svg 

npm run svgo