SVG 使用标签和 ReactJS

svg sprite reactjs

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

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

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

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

对于未来的访问者，您现在可以使用 <use xlinkHref="/svg/svg-sprite#my-icon" />。

xlink:href 已弃用，现在应该只使用 href -- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

@MattGreer 截至 2018 年，Safari 仍然需要 xlink:href，所以我们仍然需要使用它。实际的 Web 应用程序需要使用浏览器功能的共同点，或者实现特定的解决方法/polyfills。

我只是添加此评论以帮助其他搜索此错误的人，以下 Jon Surrell 的回答解决了这个问题：Property 'xlink' does not exist on type 'SVGProps<SVGImageElement>

嘿，也许接受不同的答案？社区似乎对此达成了一致。只是一个有用的建议，谢谢。

Jon Surrell

MDN 说 xlink:href is deprecated 支持 href。您应该能够直接使用 href 属性。下面的示例包括两个版本。

从 React 0.14 开始，xlink:href 可通过 React 作为属性 xlinkHref 使用。它在 0.14 的 release notes 中被称为“显着增强”之一。

<!-- 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 主 SVG 属性here。

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

更新 1：您可能需要关注 GitHub 上的 svg related issue，以获取更多 SVG 支持登陆。作品有进展。

演示：

const svgReactElement = ( ); 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, "'"); }