import SVGs in React or Vue

Do not ever import SVGs in React or Vue in this way, why?Down pointing backhand index

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
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 insteadDown pointing backhand index

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

source