为什么当我导入 svg 图标时，只呈现路径名字符串，而不是实际的 svg 图标？

Question

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 1

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="" >