quasar的svg图标使用

李恒道

为什么使用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也是挂载全局貌似

但是我还是更喜欢局部导入一点，(感觉遵守官方比较好一点？)

但是设置局部导入实在太麻烦了