DEV Community

Cover image for import SVGs in React or Vue
chandra penugonda
chandra penugonda

Posted on


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

Image description

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

Image description


Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.