How to convert .svg url into SVG tag

Question

I am getting SVG icons from backend as below response:

{
  "status": 200,
  "amenities": [
    {
      "id": 4,
      "amenities_name": "TV",
      "amenities_icon": "amenities/2AdAlkq4uNImDYGEdoUmHdzD6ldRLzSwQeSRrkKe.svg",
      "amenities_category": "accommodation",
      "created_at": "2024-03-27T13:02:25.000000Z",
      "updated_at": "2024-04-01T01:43:50.000000Z"
    },
    {
      "id": 5,
      "amenities_name": "Wifi",
      "amenities_icon": "amenities/iDNYy1PEiWtaMjfEEio0rfAqNPQKerfyetRpEEzc.svg",
      "amenities_category": "accommodation",
      "created_at": "2024-03-27T13:02:45.000000Z",
      "updated_at": "2024-03-27T13:02:45.000000Z"
    }
]
}

If I add the base URL with amenities_icon and search on the browser I am getting SVG icon with SVG tag but in React I can't do it. I am not able to convert it to an SVG tag. I load all of them inside the image tag but I need SVG tag.

I tried to convert the URL into text, and it returns a SVG tag. It works in Javascript but it is not working in React.

export const convertToSVG = async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const svgText = await response.text();
    return svgText;
  } catch (error) {
    console.error("Error fetching SVG:", error);
    return null; 
  }
};

Answer 1

you can use dangerouslySetInnerHTML attribute to set that as svg in your jsx here is the code you can use

import React, { useEffect, useState } from 'react';

const SVGIcon = ({ url }) => {
  const [svgContent, setSvgContent] = useState(null);

  const fetchSVGContent = async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const svgText = await response.text();
    return svgText;
  } catch (error) {
    console.error("Error fetching SVG:", error);
    return null; 
  }
};

  useEffect(() => {
    const loadSVG = async () => {
      const svg = await fetchSVGContent(url);
      setSvgContent(svg);
    };

    loadSVG();
  }, [url]);

  return (
    <div
      dangerouslySetInnerHTML={{ __html: svgContent }}
      style={{ width: '100%', height: '100%' }}
    />
  );
};

export default SVGIcon;