如何将 .svg url 转换为 SVG 标签

Question

我从后端获取 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"
    }
]
}

如果我用

amenities_icon

添加基本 URL 并在浏览器上搜索，我会得到带有 SVG 标签的 SVG 图标，但在 React 中我无法做到这一点。我无法将其转换为 SVG 标签。我将它们全部加载到图像标签内，但我需要 SVG 标签。

我尝试将 URL 转换为文本，它返回一个 SVG 标签。它可以在 Javascript 中运行，但不能在 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

您可以使用angerlySetInnerHTML属性将其设置为jsx中的svg 这是您可以使用的代码

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;