1- You will include the SVGs into the bundle which will make the app slow to load
2- Each SVG has hundreds of elements so when React or Vue generates the VDOM, you will end up with a giant object with thousands of unnecessary data which will increase the memory consumption
2- Each SVG has hundreds of elements so when React or Vue generates the VDOM, you will end up with a giant object with thousands of unnecessary data which will increase the memory consumption
3- The Renderer (ReactDOM or Vue.createApp) will keep track of all these unnecessary nodes in the VDOM and it will decrease the performance especially on the low-end devices
Preventing this issue early will save you from a huge cost of change in the future
Use this insteadπ
Preventing this issue early will save you from a huge cost of change in the future
Use this insteadπ
Finally, I wanna add this screenshot of Lighthouse test on a page that uses only 16 SVGs in this way! Only 16 SVGs added 2069 elements to the dom
Loading suggestions...