quasarframework / quasar-extras

[DEPRECATED, <= 0.17, moved to main repo] Fonts, icons and animations for Quasar Framework

Home Page:https://v0-17.quasar-framework.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add SVG Loader Support Out-Of-The-Box

CelticParser opened this issue · comments

Adding svg support will greatly reduce initial app loading by allowing the developer to cherry pick only the icons needed for their application.

Currently the only option to add icons is to load the entire webfont (see issue #26) which loads 200kb to 360kb during initial boot - g-zipped!

As an example:
A dashboard with 26 icons implementing the mdi font set adds 265kb to the app initial load ( it's all or nothing and the current version Quasar uses mdi v3.0.39. Also note that mdi is currently at v3.4.93 which has more than double the icons in v3.0.39 )

The same dashboard with Quasars current implemented icon set(s) commented out in the quasar.conf.js and utilizing a svg loader adds only 7.3kb to the initial load. A 257kb improvement!

Adding icon-fonts all-up-front is fine for a desktop application but for web apps a mobile apps svg, is they way to go.

The one creavent I see right now is that q-[components] ( i.e. q-collapsible arrow - 'collapse-icon' does not accept svgs 😒 ), rely on the webfonts being loaded. If quasar can have the option to override these with custom fonts similar to how Vuetify does, it will rock! (unless I am missing it in the docs somewhere?).