No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Use SVG icons everywhere (including quasar components)?

    Framework
    2
    6
    1820
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ssuess
      ssuess last edited by 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.

      1 Reply Last reply Reply Quote 0
      • ssuess
        ssuess last edited by

        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 1 Reply Last reply Reply Quote 0
        • qyloxe
          qyloxe @ssuess last edited by

          @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 1 Reply Last reply Reply Quote 0
          • ssuess
            ssuess @qyloxe last edited by

            @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?

            qyloxe 1 Reply Last reply Reply Quote 0
            • ssuess
              ssuess last edited by

              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.

              1 Reply Last reply Reply Quote 0
              • qyloxe
                qyloxe @ssuess last edited by

                @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…

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post