小编典典

SVG使用标签和ReactJS

reactjs

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

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

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

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


阅读 283

收藏
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