React和SVG精灵

Question

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

Get-WmiObject

然后我将其加载：

Get-CimInstance

无结果。我以一个沙盒为例：https://codesandbox.io/s/l711v6j7v7

Answer 1

如果要将其引用为外部资源，则需要使用svg文件的正确URL，并且需要公开访问。因此，在codesandbox中，您需要将其移至公用文件夹，以便您可以通过以下方式在浏览器中访问它：

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

然后您可以像这样引用它：

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

See this fork of your codesandbox。

Answer 2

对于SVG文件为现有/外部svg文件的用户。 您可能有一个现有的SVG Webpack加载程序，它无法使用SVG精灵的概念。为什么？通常，它需要一个指向sprite文件的文件引用/ URL，否则SVG（节点）必须存在于DOM中（以下解决方案）

这有效：

1. 将普通的SVG转换为JSX（将google html转换为jsx）
2. 创建一个新的纯react组件，并只需在render（）方法中返回转换后的JSX
3. 导入并包含创建的react sprite组件
4. 现在通过<use><svg href="#symbolnameorid"></svg></use>使用精灵符号，现在就可以使用它而无需文件前缀