如何从 Web 服务动态导入 SVG 并内联渲染

Question

我们有数百个 SVG 文件，我正在尝试内联渲染。我正在使用已经安装和配置了 @svgr/webpack 的 create-react-app。它允许我像这样添加 SVG 内联：

import { ReactComponent as SvgImage } from '../Plans/Brownlow-Floor-Plan.svg';
...

<SvgImage style={{ width: "600px !important" }} />

提供了动态渲染内联 SVG 的解决方案。但是，在 my 的情况下，我的源代码中没有任何 SVG 文件。相反，所有 SVG 文件都通过调用 API 服务返回给我。例如：

http:///myservice/api/getplan(100)
http:///myservice/api/getplan(103)
http:///myservice/api/getplan(106)
http:///myservice/api/getplan(631)

因此，当 webpack 为运行时，它没有关于这些 SVG 文件的信息。

所以我的问题是：如果我从外部提取 SVG 文件，是否可以在 React (TypeScript) 中动态渲染 svg URL？

这不是一个重复的问题：

上述问题中描述的方法不会奏效，因为它需要将所有 SVG 文件添加到源代码中。

这种方法也行不通，因为简单地使用 img 标签不会将 SVG 拉入内联：

<img src="plan.svg" />

通过 img 标签包含 SVG 使这些事情变得不可能：

任何帮助将不胜感激！

Answer 1

我不确定这是否适合您，但是您可以尝试在 <svg /> 标签中使用标签 <use />。例如：

<svg
    height={iconHeight}
    viewBox={`0 0 ${iconWidth} ${iconHeight}`}
    width={iconWidth}
>
    <use xlinkHref={`${svgPath}#${icon}`} />
</svg>

其中svgPath是SVG的URL，icon是SVG上设置的ID。您可以尝试省略 #${icon} 部分。

虽然不确定这是否有帮助。

如果您选择这条路线，您可能与 IE 不兼容...为此您可以使用 svg4everybody，但是 IE 已经死了，它应该保持死状态。

干杯！

Answer 2

有一个名为 react-svg 的优秀程序包可以满足您的需求。

您可以将它与带有 url 字符串的简单 src 属性一起使用，就像 <img> 标签一样。但在幕后，它将从 url 下载 svg 文件并将其内联注入。例如：

import { ReactSVG } from 'react-svg'

Component = () => <ReactSVG src="http://somewhere.com/my.svg" />,

如何从 Web 服务动态导入 SVG 并内联渲染

How to dynamically import SVG from a web service and render it inline

svg

inline

typescript

reactjs

create-react-app