SVG 使用标签和 ReactJS

Question

所以通常要包含我的大多数需要简单样式的 SVG 图标，我会这样做：

 <svg>
    <use xlink:href="/svg/svg-sprite#my-icon" />
</svg>

现在我最近一直在使用 ReactJS，将它评估为我的新前端开发堆栈中的一个可能组件，但是我注意到在其支持的标签/属性列表中，既不是 use 也不是 xlink:href 支持。

是否可以在 ReactJS 中使用 svg sprite 并以这种方式加载它们？

原文由 ryanzec 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2018 年 9 月更新：此解决方案已弃用，请改为阅读 Jon 的答案。

–

正如你所说，React 并不支持所有的 SVG 标签， 这里 有一个支持的标签列表。他们正在努力争取更广泛的支持，f.ex in this ticket 。

一种常见的解决方法是为不支持的标签 f.ex 注入 HTML：

 render: function() {
    var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}

原文由 David Hellsing 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

MDN 表示 xlink:href 已弃用，取而代之的是 href 。您应该能够直接使用 href 属性。下面的示例包括两个版本。

从 React 0.14 开始， xlink:href 可以通过 React 作为属性 xlinkHref 。它在 0.14 的 发行说明 中被称为“显着增强”之一。

 <!-- REACT JSX: -->
<svg>
  <use xlinkHref='/svg/svg-sprite#my-icon' />
</svg>

<!-- RENDERS AS: -->
<svg>
  <use xlink:href="/svg/svg-sprite#my-icon"></use>
</svg>

2018-06-09 更新： 添加了有关 href 与 xlink:href 属性的信息，并更新了示例以包含两者。 谢谢 @devuxer

更新 3 ：在撰写本文时，可以在 此处 找到 React master SVG 属性。

更新 2 ：似乎 所有 svg 属性现在都应该可以通过 react 获得（参见合并的 svg 属性 PR ）。

更新 1 ：您可能需要关注 GitHub 上的 svg 相关问题 以获得额外的 SVG 支持登陆。工作有进展。

演示：

 const svgReactElement = (
  <svg
    viewBox="0 0 1340 667"
    width="100"
    height="100"
  >
    <image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
    { /* Deprecated xlink:href usage */ }
    <image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/>
  </svg>
);

var resultHtml = ReactDOMServer.renderToStaticMarkup(svgReactElement);
document.getElementById('render-result-html').innerHTML = escapeHtml(resultHtml);

ReactDOM.render(svgReactElement, document.getElementById('render-result') );

function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom-server.browser.development.js"></script>

<h2>Render result of rendering:</h2>
<pre>&lt;svg
  viewBox=&quot;0 0 1340 667&quot;
  width=&quot;100&quot;
  height=&quot;100&quot;
&gt;
  &lt;image width=&quot;667&quot; height=&quot;667&quot; href=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
  { /* Deprecated xlink:href usage */ }
  &lt;image width=&quot;667&quot; height=&quot;667&quot; x=&quot;673&quot; xlinkHref=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
&lt;/svg&gt;</pre>

<h2><code>ReactDOMServer.renderToStaticMarkup()</code> output:</h2>
<pre id="render-result-html"></pre>
<h2><code>ReactDOM.render()</code> output:</h2>
<div id="render-result"></div>

原文由 Jon Surrell 发布，翻译遵循 CC BY-SA 4.0 许可协议