'Print <svg> inside <img> on React

Hello I am trying to make small app with svgs. I have a request that returns svg and other informations.

[
  {
    "svg": "<svg \n  xmlns=\"http://www.w3.org/2000/svg\"\n  class=\"h-6 w-6\"\n  fill=\"none\"\n  viewBox=\"0 0 24 24\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n>\n  <path \n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  d=\"M11 19l-7-7 7-7m8 14l-7-7 7-7\"\n  />\n</svg>",
  }
]

Getting svg value

  useEffect(() => {
    getSummaryWarnings().then((res) => {
      setData(res.data);
    });
  }, []);

Printing the img

 {data.map((item) => (
          <img
            tabIndex={0}
            key={item._id}
            className="warning-sign"
            alt={item.title}
            src={item.svg}
            onClick={() => tooglePopup(item)}
          />
        ))}

But i cant see my svg. Any help.

htmlreactjssvg


Solution 1:[1]

I found an alternative solution:

We can print svg with this

<div
            tabIndex={0}
            key={item._id}
            className="warning-sign"
            alt={item.title}
            onClick={() => tooglePopup(item)}
            dangerouslySetInnerHTML={{ __html: item.svg }}
          />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Neo

Related Questions