react和 SVG 精灵

IT技术 javascript reactjs svg-sprite
2021-05-07 22:02:50

我正在使用 React，并且正在尝试从精灵加载 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

2个回答

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

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

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

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

看到你的代码和盒子的这个分支。

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

这有效：

  1. 将普通 SVG 转换为 JSX（google html 到 jsx）
  2. 创建一个新的纯 react 组件，并在 render() 方法中简单地返回转换后的 JSX
  3. 导入并包含创建的 react sprite 组件
  4. 现在使用精灵符号通过<use><svg href="#symbolnameorid"></svg></use> 您现在可以在没有文件前缀的情况下使用它
其它你可能感兴趣的问题
上一篇在 Google Play 上更新使用 PWA2APK 构建的 PWA 应用程序时出现问题 下一篇斜坡 1.4 的 Z 轴问题