Why when I import a svg icon, only the pathname string is rendered, and not the actual svg icon?

I have a folder called icons inside assets folder, and inside icons, I have folders for different sizes, inside each one, I have a bunch of svg files, each containing a svg icon.

I created an index.js file inside icons folder, and then from it, I imported a svg file, and then export it, but when I import it from another component, all I get is a string pathname, and not the actual svg.

Here’s my folder structure

Here’s inside each size folder

Here’s inside the index.js

The console.log shows this: static/media/assets/icons/12x12/arrow-down-12.svg

Note that, I also tried using require to import the svg.

Answer

In order to render the svg you need to pass it as a dynamic value to an image tag like this:

<img src={arrowDown12} alt="" >