为什么使用SVG图标
占用空间更低
同时质量更好
无须导入webfont字体
如何在quasar使用svg图标
在quasar使用svg图标相对webfont较为麻烦
在script标签下方填入
import { 名字} from '@quasar/extras/material-icons'
然后在created设置
this.xxx=名字
之后组件可以使用
来设置svg图标
关于图标的规则命名可以参考http://www.quasarchs.com/vue-components/icon/#Svg%E5%9B%BE%E6%A0%87
举个例子
我们想使用Material的svg图标
可以在material的官网查到相应的名字
如all_inbox
我们需要把第一个大小,然后把后边的大写,去掉
变成matAllInbox
另外注意,虽然大部分可以,有些在图标里是不存在的,如download
关于全局导入问题
不推荐全部导入@quasar/extras/material-icons所有图标
大概478KB左右,占用太大了
一共有1000+的图标
但是如果把自己使用的图标挂载到全局我认为是没有问题的
quasar.config.js的设置svg-material也是挂载全局貌似
但是我还是更喜欢局部导入一点,(感觉遵守官方比较好一点?)
但是设置局部导入实在太麻烦了