SVG使用标签和ReactJS

小编典典

SVG使用标签和ReactJS

reactjs

因此，通常包括我需要简单样式的大多数SVG图标，我这样做：

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

现在，我一直在玩ReactJS作为它的后期评估在我的新的前端开发堆栈可能的成分，但是我注意到，在其支持的标记/属性列表，无论是use或xlink:href支持。

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

阅读 280

2020-07-22

共1个答案

小编典典

2018年9月更新
：不建议使用此解决方案，请阅读乔恩的答案。

反应并不支持所有的SVG标签就像你说的，有支持的标签的列表在这里。他们正在努力获得更广泛的支持，如票证中的
f.ex 所示。

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

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

2020-07-22