javascript - react 和 SVG Sprite

Question

我正在使用 React，我正在尝试从 sprite 加载 svg 图标。我的 Sprite 是这样的:

<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，并且它需要可公开访问。所以在codesandbox中你需要将它移动到public文件夹中，这样你就可以在浏览器中通过

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

然后你可以像这样引用它:

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

See this fork of your codesandbox .