所以通常要包含我的大部分需要简单样式的 SVG 图标，我会这样做：
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
现在，我一直在玩ReactJS作为它的后期评估在我的新的前端开发堆栈可能的成分，但是我注意到，在其支持的标记/属性列表，无论是use或xlink:href支持。
是否可以在 ReactJS 中使用 svg 精灵并以这种方式加载它们？
SVG 使用标签和 ReactJS
IT技术
svg
sprite
reactjs
2021-05-11 00:03:18
4个回答
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 年 6 月 9 日更新：添加了有关hrefvsxlink: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, "&").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>如果您遇到xlink:href，那么您可以通过删除冒号和驼峰式添加添加的文本来获得 ReactJS 中的等效项：xlinkHref。
您可能最终会在 SVG 中使用其他名称空间标记，例如xml:space等。同样的规则适用于它们（即，xml:space变成xmlSpace）。
正如 Jon Surrell 的回答中已经说过的那样，现在支持使用标签。如果你不使用 JSX，你可以这样实现：
React.DOM.svg( { className: 'my-svg' },
React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)