Quasar & Vue 3: Create an Icon Library (Reduce Bundle Size by 50% - 70%!)

in this video i'm going to show you how to reduce your quasar apps bundle size by 50 to 70 by using a cli tool called fantasticon to create a custom icon library for your project which contains only the icons you need for your project make sure you subscribe and click the bell if you don't want to miss any of the videos in this series and if you missed any of the previous videos then you can find the link to the whole playlist in the description so i decided to build the app that i'm working on budget 2 for production and see how big the bundle size is so far and if i just jump to finder we can see the spa that it's generated here and i was shocked to see that bundle size is 2.4 megabytes and one megabyte of this is coming from the font files from the icon libraries that i'm using in the app font awesome lion awesome and material icons and 140 kilobytes are coming from the associated css from those icon libraries which is in this vendor css file so i decided to see if i could create a custom icon library which only contains the icons that i'm actually using in the app to see if i can reduce this bundle size so i'm just going to switch to my latest branch this icon font branch and i'm going to build this for production with quasar build that's finished building and if we now jump back to the dist folder we can see it's reduced it to 1.2 megabytes which is an astounding reduction of 50 so in this project we're going to create a quasar 2 and view 3 project and we're going to add one icon from each of the available icon libraries that come with quasar so ionicons fonts awesome either icons themify line awesome and material icons then we're going to build this up for production and see what the bundle size is i'm going to be quite shocked to see how big it is so then we're going to use a cli tool called fantasticon to create a custom icon library which only contains the six icons from each of the libraries that we're using and we're going to see our bundle size reduced by a staggering 70 percent [Music] let's get started by creating a new quasar 2 and view 3 project so i'm going to jump to quasar.dev and at the time i'm recording this quasar 2 is still in beta so i'm going to click on this looking for quasar v2 with view free button and we're going to go to quasar cli on installation and if you don't have the quasar cli installed you can install it with this command and of course you also need node installed as well which you can get to at node.js or you can install it with something like nvm if you prefer and we should then be able to create a new quasar 2 project by running this command quasar create and since quasar 2 is still in beta we need to add dash dash branch next so i'm going to jump to vs code which is the editor i'm going to be using i'm going to jump to the folder where i keep my projects and i'm going to run quasar create and i'm going to call this project quasar dash icon library we need to add branch next and hit enter i'm going to leave the project name i'm going to change the product name to quasar icon library i'll leave the description and i'll put my name for the author and i'm going to use sas with scss syntax i'm going to disable eslint with the spacebar although you might want to consider using that in your own projects and hit enter and i'm going to use npm to install the dependencies okay it's finished creating the project and we can launch it by running quasar dev and i can see the folder is created quasar icon library i'm going to drag that into vs code and open up the terminal and we're on quasar dev we can now see the app running in the browser and i'm just going to get rid of some stuff that we don't need so i'm going to jump to source layouts main layout.view and i'm going to remove the draw so this q draw component i'm going to get rid of that and i'll remove this essential link import and this links list const i'll remove this components object and i'll just remove everything in the setup function and i'll remove this ref that we're importing and i'll also remove this button for toggling the draw in the header this cue button component and save that and i'll also delete the essential links component in this components folder get rid of that okay let's get started [Music] let's install each of the available icon libraries and add one icon from each library to this home page so i'm going to jump to quasar.com.js in the root of our project i'm just going to search for icon and we can see the available icon libraries here in this extras array so i'm going to uncomment ionicons i'm not going to bother with mdi because i think that's basically just an old version of material icons i'll uncomment font awesome and either icons themify and lion awesome i'll save that okay let's add an icon from each of these libraries to our page here so i'm going to jump to the page which is in source pages index.view i'm going to remove these flex classes on the q page component and remove this image and save that i'm going to jump back to the quasar site and jump to options and helpers and quasar icon sets and we can see links here to all of the different icon sets so i'm going to open a bunch of these in new tabs so we'll open up material icons font awesome ionicons eva icons themify icons and line awesome so let's jump to the material icons page and we'll just grab the first icon this search icon and for this we just need to use the class search so i'm going to jump back to our project and we'll add a cue icon component to the page cue icon we'll set the name to search and save that and we can see that icon but it's quite small so let's add a size prop and set that to xl extra large i'm going to add a bit of padding around each icon so we'll use one of quasars margin classes so i'll add q m a for margin all dash lg for large save that okay that looks pretty good so let's jump to the font awesome page and by the way i'm going to leave all these tabs open because we're going to need them later on and again we'll just grab this first icon here so i'll click on that and i'll click on this markup example to copy that paste it on the page and we'll duplicate our cue icon component and copy these classes and paste them into the name prop on this cue icon delete the i tag save that and we can now see this font awesome icon so let's jump to ionicons and i think quasar currently only supports ionicons version four and this is version five but if we scroll down to the bottom uh click on this v4 link then we can see the v4 icons so again i'm just going to use the first icon so i'll click on this icon and copy the example markup paste it on our page duplicate this cue icon and copy this name value paste it into this name value in our queue icon and delete the ion icon component now reload the page and this looks pretty messed up and i think that's because for ionicons we need to add the prefix ion dash to this name prop so i'll save that and we can now see the ionic on icon so let's jump to either icons and again just click on the first icon and we need to use the name activity outline but again i think we need to add the prefix either so let's just duplicate this cue icon and copy this class here paste it into the name prop and just add the prefix eva and save that now we can see that on the page so let's jump to themify icons click on the first icon and i think we can just use this class here so i'll copy that duplicate this cue icon and paste in the class save that and we can see that icon finally let's jump to line awesome and again click on the first icon copy this example paste that at the bottom duplicate a q icon component copy these classes and paste them into this name prop and delete the i tag save that and so we now have one icon from each of these icon libraries [Music] okay let's build this model for production and check the bundle size so i'm going to jump to the terminal in vs code kill the dev process run quasar build okay that's finished building so i'm going to jump to the project folder um the dist folder and we can see the spa that it's generated here and we can see it's two megabytes and if we jump into this fonts folder then i think these fonts here which start with kfo are the roboto font but all of the other font files are coming from our icon libraries so i'm just going to select all these and see how big they are so we've got 1.3 megabytes coming from these font files from our icon libraries and if we jump into the css folder and open up this vendor file then i think all the css for our icon libraries will be at the top of this file and the quasar styles will be at the bottom so i'm just going to search for quasar so the quasar styles start here but everything else is coming from our icon libraries so i'm just going to select all this code so we can see down here we have over 200 kilobytes just coming from the css for these icon libraries so that's 1.5 megabytes of data that our user needs to download just so we can display these six little icons and that's just not acceptable so let's create our own icon library with just these six icons in it uninstall all of the icon libraries from quasar and reduce our bundle size by a whopping seventy percent [Music] so we're going to create our icon library using this tool fantasticon and this tool will create our icon library based on a bunch of svg files so first we need to grab an svg for each of our icons and place these all in a folder so i'm going to create a new folder in our source directory called svg icons and we'll place all of our svg files in here so i'm going to jump to the material site and we still have our search icon activated here and we can just click on this svg link to download the svg so i'm going to download that and drag it into this svg icons folder and i'm just going to rename this remove this 24 dp bit from the end and just so we know where this icon came from i'm going to add a prefix of mat for material let's jump to the font awesome page we can click on this little download button here to download the svg and again i'm going to drag that into this svg icons folder i'm going to rename it and give it a prefix of fa for fonts awesome uh let's jump to the ionic ons page um we can see this little svg button here for downloading the svg and for some reason these download links are not working at the moment that's failed so instead i'm going to download the designer pack by clicking this button at the top here and open up the zip and let's open that over here so we'll jump in there we want to scroll down to the material design style icons which start with md in the file name and let's just check which icon we used i'll jump to index.view and it was this add circle outline so let's see if we can find that and there it is there we can see the svg so i'm going to drag this into our svg icons folder and i'll rename that and we'll give this a prefix of ion dash so we know where it came from uh let's jump to the eva icons page click on this svg link to download the svg drag it into our folder and we'll give this a prefix of eva jump to the themify page and i don't think we can download the svgs from this page so we'll download this icon font pack and open up this zip and jump to the svg folder and what's the icon we use i'll jump to index.view and it's this arrow up icon and i can see that there arrow up so i'll drag that into the svg icon folder and rename it and give it a prefix of ti dash and finally we want to grab the line awesome svg and again i don't think we can download the svg from here so we'll have to download the pack instead by clicking on this download zip button and we want the accessible icon svg so let's open up that jump to svg and drag this accessible icon svg to our folder and again we'll give this a prefix of la for line awesome and we now have svgs for each of our icons okay let's create an icon library based on these svgs using fantasticon so i'm going to google fantasticon i'm going to jump to the github page and scroll down so this is a global tool so we can install it with this command so i'm going to jump back to vs code i'm going to leave our app running in this terminal and open up a new terminal and let's paste in this command and install fantasticon okay that's installed and it gives us a basic command here so we just need to specify the input directory where our svgs are and then specify an output folder where it'll place our font files and our css file so we need an output folder first and i'm going to place this in our public folder so i'm going to create a new folder called icon dash font and we'll use this as our output folder so i'm just going to run fantasticon and then we need to specify our input folder which is source slash svg dash icons and then we need to add dash o and specify our output folder which is going to be public slash icon dash font and by the way when you run this you might see an error such as this fatal error wasm code commit allocation failed process out of memory and you can fix this by updating your version of node and it's definitely working with node version 16.0.3 so i'm going to run this command and it says generating font kit six svgs found in our input folder and it's generated three different font files eot waft2 and waff and we don't actually need the eot file so we will get rid of that later on and it's also generated a css file uh three other files which we probably don't need so again we'll disable the generation of these three files later on but i'm just going to jump to this folder that it's populated with these files and if we jump to icons.css then we can see all of the classes that we need to use for our icons and the classes that it's generated are based on the file name prepended with icon dash but before we can use this icon library we need to use this css file in our project so i'm going to jump to the html file index.template.html in the source folder and at the bottom of our head i'll add a link element make sure the rel attribute is set to stylesheet and we'll just add the path to this icon css file and everything in this public folder is available at the root so we can just set this path to icon font slash icons dot css so icon dash font slash icons dot css so i'll save that and now let's add these icons from our new icon library to our home [Music] page okay let's add these new icons to our page i'm going to close this html file um this file here jump to index.view and after our current queue icon components i'm going to add a div and then i'm going to copy all of these queue icons and paste them into this div and now we just need to update the class names so for this search icon if we jump to icons.css we can see our search icon here so we need to use this class here icon dash mat dash search underscore black so i'll copy this and paste that here and we'll do the same for our font awesome icon which is this one here so i'll copy this class obviously we don't want to copy the before pseudo selector part just everything before the colon so we'll copy that paste that in here and now we need our ionic on icon and that's here so i'll copy the class paste that in here and we need the either icon which is here so i'll copy that class and paste that in this skew icon and then we need the themify icon the class is here so we'll copy that paste that in there and finally we need the line awesome icon which is here so copy the class and paste it in here and save that and we can see two of our icons just fine but the rest of them look way too small so let's fix this with one of fantastic ons command line options and let's also stop fantasticon from generating files that we don't need such as the eot file html json and ts files okay let's fix these tiny icons so i'm going to jump back to fantasticon and look at the command line options and we can use this normalize option to normalize icons by scaling them to the height of the tallest icon so let's run our command again in the terminal so fantastic on then our input and output paths and let's add dash dash normalize and run that again it's generated our files so let's see how they're looking so this has fixed the sizes they all look exactly the same as our original icons however there's an issue with our either icon it's got this black square in the background however i found a way to fix this by changing the code in the svg file so i'm going to jump to source svg icons and i'm going to open up our eva icon here and i found that we can fix this by removing these g tags so i'm going to select from the opening of this first g tag up to just before this path tag and delete that and i'll also delete these closing g tags and save that let's run our and by the way i didn't find any article or anything that told me to do that i just figured it out by messing around essentially so now if we run our command again i'll reload the app our icons now all look perfect okay so let's stop fantasticon from generating the files that we don't need so we don't need the eot font file we only really need the wharf and waff2 these days and we don't need the html json or ts files although you may find uses for these in your particular project but i'll show you how to stop fantasticon from generating these so first we can use this t option to specify the font formats to generate so let's jump back to our terminal and we'll add this option to our command so dash t and we're just going to need waff and waff ii and we can use this g option or asset types option to specify the other assets to generate and i'm only going to need the css file so i'm just going to add g and css and before we run this let's just delete everything in our output folder because it won't overwrite it by default so in public icon font i'll select all the files and delete those let's run this command again this time if we look at our output folder we only have the assets we need the waff file the waft2 file and the icons.css file uh let's just make sure they're still looking okay uh yeah the icons still look great [Music] this command is not easy to remember so let's create an npm script so that we don't need to remember it so i'm going to copy this command that we just fired and i'm going to jump to the package.json file in the root of our project i'll remove this test script in the scripts object and we'll create a script called icon dash font and set the value to this command and now we don't need to remember all of these options and we should be able to just run npm run icon dash font and before we run that i'm just going to delete the contents of the output folder so i'll delete the waf files and the css file let's run this command and make sure it's working uh yeah it looks like it worked and it successfully generated our files again [Music] let's say at some point we have a ton of different icons in our app from various different icon libraries we might not want all of those svg files in a single folder like this we might want to split them up in two folders for example a folder for each icon library or maybe a folder for each type of icon say social icons and navigation icons etc and with fantastic on we can do this we can put all of our svgs in different folders and it will actually use the name of the folder as a prefix in our class name so i'm going to create a folder in this svg icons folder for each of our different icon libraries so i'm going to create a folder called eva for all of our eva icons and then a folder for font awesome fa and a folder for ionicons folder for line awesome with the name la a folder for material icons with the name m80 and a folder for themify icons with the name ti and then i'm going to move these icons into their respective folders so i'll move the eva icon in here and the fa icon in the fa folder and the same for the ionic on on the line awesome icon the material icon and the themify icon and now that we've put these svgs into folders we no longer need to prefix these svgs with the name of the icon library because fantasticon will just use the folder name as the prefix so i'm going to rename each of these icons and just remove those prefixes which we added so remove fa dash from the font awesome icon and remove ion dash from the ionic on and the same for all the others as well now if we rerun our command all of our class names should be the same so let's rerun the icon font script and reload the app and yeah it's all still working and we're using the same class names for our icons but now they're nicely organized into folders [Music] it would be really handy if we could automatically regenerate our icon library every time a new svg is added to this svg icons folder or every time a file is renamed or deleted and we can do that using the watch package so i'm just going to google npm watch and we want to jump to this one that's just called watch not the one that's called npm dash watch this does a similar thing but i just couldn't get it to work so we're going to use this watch package so it tells us how to install watch locally but i'm going to install it globally so i'm going to run npm install watch g and that's now installed and so we can get this to watch a particular folder and then run a command for us every time the contents of that folder change so we can just run watch and then in quotes single quotes our double quotes we can enter the command that we want it to run and we want it to run npm run icon font the npm script that we added and then we just need to specify the folder we want it to watch and we want it to watch source slash svg dash icons so if we run this now you can see it's already run our icon font script and if anything changes in our svg folder it should re-run the command again so i'm just going to clear the terminal here and let's download a new material icon so let's say this settings icon i'm going to download the svg and drag it into svg icons mat our material icons folder so we'll drag that in there and you can see this watch package detected the change and re-run our icon font script and if we rename this file i'll rename it to just settings then again it's rerun our script and if we go to public icon font and icons.css we can see it has regenerated our css files and our font files as well so we can now just add this new icon to our page without having to constantly rerun our generate command so the name is going to be icon dash m80 settings save that and we can now see that icon on the page let's also set up an npm script to run this watch command so that we don't need to memorize it so i'm going to copy this command and again jump to package.json and we'll add a new script here i'll call it icon font colon watch and we'll paste in that command and save that let's see if this is working so if we just run npm run icon font colon watch and yeah it seems to be working so let's just rename one of our svgs so i'll rename this search underscore black to just search and yeah it's rerun the command and we can now no longer see the search icon because the class will have changed so on index.view i'm just going to change the class and remove this underscore black save that and there we go [Music] one of the beautiful advantages to using a custom icon library like this is that we're not just limited to the icon libraries that come with quasar we can use any icons that we want so for example let's say you want to use an icon from icon finder iconfinder.com which is a site with millions of different icons uh let's say we want a phone icon i'll search for phone choose the free option and find something that looks pretty decent um this one looks pretty good so i'll click on download svg and i'll create a new folder in our svg folder for icon finder i'll call that if drag the icon in and i'm just going to rename it to phone um we should then be able to use this in our app so we'll duplicate this cue icon on index.view change the class to icon dash i dash phone boom there we go and we can even create our own icons from scratch and add those to the library so let's say you have a very particular need for a very particular icon and you just can't find it anywhere in any of the icon libraries or on sites like icon finder then you can use an app such as figma or sketch to create the icon yourself which is what i've done here so let's add this beautiful icon to our icon library so i'm going to export this as an svg so i'm going to jump to projects quasar icon library and source and svg icons i'll create a new folder called custom for icons that i've created myself and save that and this should now be added to our icon library and we should be able to use it so i'm just going to duplicate one of these cue icons and set the class and save that and we can now see this beautiful icon on our page [Music] let's remove these big ass icon libraries from our app rebuild it for production and see how much we reduced our bundle size by so first of all i'm going to remove all of the original icons from the page and just delete those and save that and i'm going to jump to the config file quasar.com.js and comment out ionicons fonts awesome eva icons themify line awesome and material icons and save that and everything's still looking okay [Music] before we build this up for production and see how much space we saved there's one caveat that you need to know which is that some quasar components use material icons out of the box so let's see what happens if we add a cue select to our page so i'm going to jump to the quasar site a few components form components and select and i'll scroll down a bit let's just copy this filled select which is this second one here so i'll copy that and add it to the page after this div and i'll also jump to the script section copy all of this script section paste over our script section i'll split the attributes on this cue select and i'll also give this a fixed width i'll just add a style attribute with the width set to 200 pixels and i'll also add some margin so q dash m a for margin all directions dash excel and we'll save that and see how it's looking and you can see this is not looking very good because we can't see the little drop down icon which is usually displayed here instead we just see the name of the icon and that's because this icon is from the material icons library and we just uninstalled that library but don't worry because we can fix this because if we jump to the select page up to the api section and then content and scroll down we have this drop down icon prop which we can use to specify our own icon so what we can do now is grab the arrow drop down icon from the material icons library add it to our library and then use this drop down icon prop to specify this drop down icon so i'm going to jump back to the material icons page and search for arrow underscore drop underscore down and we can see the icon there so let's click on that and download the svg and we'll add it to svg icons mat drop that in there and our icon library should be auto regenerated because we're watching it we can now jump to this cue select and add this drop down icon prop and set it to our icon class which should be icon dash m a t dash arrow underscore drop underscore down and actually i need to rename this file so i'll rename it to just arrow underscore drop underscore down and let's jump back to our app our reload and our beautiful drop down arrow is now back in its place now i haven't tested all of the quasar components but the select component is the only component which gave me this problem in fudge it too but you'll just have to do your own research on your own experiments and make sure any quasar components that you want to use in your app will give us an option such as this for components which do use material icons [Music] okay let's build this sucker for production and see how much space we saved so i'm going to jump back to our first terminal close the dev process and run quasar build okay that's finished so let's see if this was all worth it so i'm going to jump back to finder and we can see our bundle is now only 647 kilobytes down from two megabytes so 647 divided by 2000 that's a reduction of almost 70 percent pretty mother flipping good and you can grab the source code for this app at danny's dot link slash quasar icon library code and you can find the link in the description please hover over my face and click subscribe every subscription helps me to create more content for this channel thanks for watching and i'll see you in the next [Music] one

Channel: Make Apps with Danny

Views: 2,011

Keywords: android, app design, app development, app development process, app ideas, building an app, cordova, create a real world app, create an app, creating an app, css, electron, how to create a successful app, how to launch an app, how to start an app business, html, ios, javascript, mac, quasar, quasar framework, quasar framework tutorial, real app, real world app, successful app launch, vue, vue.js, vuejs, windows, iconsets, icon library, custom icon library, svg, fantasticon

Id: WWWEA9UGY3A

Length: 37min 50sec (2270 seconds)

Published: Wed Jul 28 2021