上一主题 下一主题
返回列表 发新帖

quasar的svg图标使用

[复制链接]

82

主题

556

帖子

771

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
771
发表于 2021-2-12 01:37:11 | 显示全部楼层 | 阅读模式

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

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

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

回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表