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