Use SVG icons everywhere (including quasar components)?

ssuess

I have poured over the documentation for svg (https://quasar.dev/vue-components/icon#Svg-icons) and iconsets (https://quasar.dev/options/quasar-icon-sets#Configuring-the-default-Icon-Set) but don’t see a way to replace the icons used by quasar components with svgs. And if I can’t do that, it does not seem that I am significantly reducing my bundle size, since I am using the same icons (fontawesome pro) for all my icons and it seems necessary to include it in my quasar.conf.js file. I have tested importing my own defined svgs and using them for q-btn and q-icon and it works fine. But I can’t figure out how to replace the iconset with svg instead of the webfont.

ssuess

I mean, if one can’t replace the webfonts used in the components, and one is using icons from that same webfont elsewhere, does that mean there is no reason to use SVGs at all? The built project seems to include the entire webfont, not just the used ones…

qyloxe

@ssuess said in Use SVG icons everywhere (including quasar components)?:

…The built project seems to include the entire webfont, not just the used ones…

if you mean that “all characters of webfonts are included”, then how do you know which ones will be used by user in inputs?

ssuess

@qyloxe not sure I am understanding you, but I am just talking about the webfont icons, so it should be possible to only load the ones I am using in my design (with svgs). Visitors/Users don’t use webfont icons other than to view the ones that are set. It seems that the entire iconset is being included in the build whether or not they are being used, but perhaps I am mistaken?

ssuess

to be a little clearer (hoepfully), if I remove iconSet: 'fontawesome-v5-pro', and boot: ['fontawesome-pro'] from my quasar.conf.js file, quasar’s built in components will no longer show any icons. Originally I wanted to replace those with JUST the svgs/icons I am using, nothing more, to reduce the built bundle size. Because if we look in the boot file for the iconset, quasar is including:

// required
import '@fortawesome/fontawesome-pro/css/fontawesome.min.css'
import '@fortawesome/fontawesome-pro/css/light.min.css'
// do you want these too?
// import '@fortawesome/fontawesome-pro/css/brands.min.css'
// import '@fortawesome/fontawesome-pro/css/solid.min.css'
// import '@fortawesome/fontawesome-pro/css/regular.min.css'

Which seems to bundle the entire light iconset, NOT just the ones that are used in the components I have built and or chosen from the built in ones.

qyloxe

@ssuess said in Use SVG icons everywhere (including quasar components)?:

@qyloxe … but I am just talking about the webfont icons, so it should be possible to only load the ones I am using in my design (with svgs)

ach, icons only. Yeah, it should be possible to build only used. Can’t help you with this btw…