React 和 SVG 精灵

Posted 2023-03-04

【中文标题】React 和 SVG 精灵

【英文标题】：React and SVG sprite

【发布时间】：2019-04-28 08:10:15

【问题描述】：

我正在使用 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

【问题讨论】：

您是否尝试过将精灵导出为单独的 React 组件、导入它们并像其他任何 React 组件一样渲染它们？

【参考方案1】：

如果您想将其作为外部资源引用，您需要使用 svg 文件的正确 URL，并且它需要可公开访问。所以在codesandbox中你需要把它移到public文件夹中，这样你就可以在浏览器中通过

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

那么你可以这样引用它：

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

See this fork of your codesandbox.

【讨论】：

是的，它有效；但是如果我把我的精灵放在一个单独的文件中，比如在沙箱中呢？

你可以把它放在一个单独的组件中，但是你必须渲染组件。查看沙箱的此修改：codesandbox.io/s/0p5owx8ozn

我明白了……问题是我的精灵是由svg-sprite-loader 创建的，我必须照原样调用它。有什么办法可以从文件中渲染它？

嗯，我已经修改了沙盒。您需要将 sprite.svg 移动到公用文件夹并确保像这样引用它：xlinkHref="/sprite.svg#circle"

嗯，看起来不错，但是……如果我的公共文件夹是dist，而精灵在dist/svg/sprite.svg 里面呢？

【参考方案2】：

对于那些 SVG 文件是现有/外部 svg 文件的情况。 你可能有一个现有的 SVG webpack 加载器，它不能使用 SVG sprites 的概念。为什么？它通常需要 sprite 文件的文件引用/url，或者 SVG（节点）必须存在于 DOM 中（下面的解决方案）

这行得通：

将纯 SVG 转换为 JSX（google html 到 jsx） 创建一个新的纯 react 组件，并在 render() 方法中简单地返回转换后的 JSX 导入并包含创建的 react sprite 组件 现在通过<use><svg href="#symbolnameorid"></svg></use>使用精灵符号你现在可以在没有文件前缀的情况下使用它