React中如何将SVG URL转换为SVG标签？

问题背景 #

后端返回的SVG图标数据格式如下：

{
  "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"
    }
  ]
}

将基础URL与amenities_icon字段拼接后，在浏览器中可以看到完整的SVG标签内容，但在React项目里目前只能通过img标签加载这些图标，我需要直接使用SVG标签来渲染，以便能自定义样式或操作SVG元素。

尝试过的方法 #

我写了一个异步函数尝试获取SVG文本内容，这个方法在普通JavaScript环境中有效，但在React里无法正常转换为SVG标签：

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; 
  }
};

求助 #

请问如何在React中实现将SVG URL转换为可直接渲染的SVG标签？

内容的提问来源于stack exchange，提问作者Sudipta Das