React and SVG sprite

Question

我正在使用React，并试图从sprite加载svg图标。我的精灵是这样的：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol viewBox="0 0 28.3 28.3" id="square">
<path d="M.3 30.7h27L13.8 3.8zM126.3-51.7c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z" />
<path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" />
</symbol>
<symbol viewBox="0 0 28.3 28.3" id="circle">
<circle cx="14.2" cy="14.2" r="14.2" />
</symbol>
</defs>
</svg>

我加载它：

<svg viewBox="0 0 28.3 28.3" className="App-icon">
<use xlinkHref="./sprite#square" />
</svg>

没有结果。我做了一个沙盒作为例子：https://codesandbox.io/s/l711v6j7v7

Answer 1

如果您想将其作为外部资源引用，您需要使用svg文件的正确URL，并且它需要是可公开访问的。因此，在代码沙盒中，您需要将其移动到公用文件夹，以便通过在浏览器中访问它

https://codesandbox.io/s/l711v6j7v7/sprite.svg

然后你可以这样引用它：

<use href="/sprite.svg#square" />

查看这个代码沙盒的分支。

Answer 2

对于SVG文件是现有/外部SVG文件的情况。您可能有一个现有的SVG webpack加载程序，它不适用于SVG精灵的概念。为什么？它通常需要一个sprite文件的文件引用/url，或者SVG(节点(必须存在于DOM(下面的解决方案(中

这项工作：

1. 将普通SVG转换为JSX(从google html转换为JSX(
2. 创建一个新的纯react组件，并简单地在render((方法中返回转换后的JSX
3. 导入并包含创建的反应精灵组件
4. 现在通过<use><svg href="#symbolnameorid"></svg></use>使用精灵符号。现在可以在没有文件前缀的情况下使用它