因此，通常要包含大多数需要简单样式的 SVG 图标，我会这样做:
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
现在，我最近一直在使用 ReactJS，评估它作为我的新前端开发堆栈中的可能组件，但是我注意到在其支持的标签/属性列表中，既没有 use 也没有支持xlink:href。
是否可以使用 svg sprites 并在 ReactJS 中以这种方式加载它们？
请您参考如下方法:
MDN 表示 xlink:href is deprecated支持href。您应该能够直接使用 href 属性。下面的示例包括两个版本。
从 React 0.14 开始，xlink:href 可通过 React 作为属性 xlinkHref 使用。 release notes 中将其称为“显着增强”之一。为 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 属性的信息，并更新了示例以包含这两者。 Thanks @devuxer
更新 3:在撰写本文时，可以找到 React master SVG 属性 here .
更新 2:看来所有 svg 属性现在都应该可以通过 React 使用(请参阅合并的 svg attribute PR )。
更新 1:您可能需要关注 svg related issue在 GitHub 上获取更多 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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"); }<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><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></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>
