Quasar & Vue 3: Create an Icon Library (Reduce Bundle Size by 50% - 70%!)
In this video, I’m gonna show how to reduce your Quasar app’s bundle size by 50 - 70% by creating a Custom Icon Library with only the icons you need for your project
In this series I'm documenting my journey creating a real world app from scratch, using Quasar 2, Vue 3 & Composition API. An app that will ultimately be deployed to the iOS, Android, Mac & Windows App Stores.
👉 Source Code: https://dannys.link/quasariconlibrary...
👉 Full playlist: • Creating a Real World Quasar App (Vue 3)
0:00 Introduction
0:28 What We’re Gonna Do
2:18 Getting Started
4:58 Install Icon Libraries & Add Icons
9:41 Build & Check Initial Bundle Size
11:23 Grab the SVG’s
14:54 Generate Icon Library with Fantasticon
18:11 Add New Icons to the Page
20:17 Optimise Icon Generation
23:13 Create NPM Script
24:11 Organise SVG’s with Folders
26:58 Watch for Changes
30:29 Custom Icons!
32:35 Remove Big Ass Icon Libraries
33:18 Caveat: Some Quasar Components use Material Icons!
36:44 Build & See New Bundle Size
👉 My Courses - https://dannys.link/courses
👉 Download Fudget: https://www.fudget.com
👉 My VSCode Setup - https://dannys.link/vscodesetup
👉 DONT CLICK THIS - https://dannys.link/dontclick
Watch video Quasar & Vue 3: Create an Icon Library (Reduce Bundle Size by 50% - 70%!) online without registration, duration hours minute second in high quality. This video was added by user Make Apps with Danny 28 July 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,738 once and liked it 142 people.