上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

quasar的svg图标使用

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5966

    回帖

    6764

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6764

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 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也是挂载全局貌似

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

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

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

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