因此,通常包括我需要简单样式的大多数SVG图标,我这样做:
<svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg>
现在,我一直在玩ReactJS作为它的后期评估在我的新的前端开发堆栈可能的成分,但是我注意到,在其支持的标记/属性列表,无论是use或xlink:href支持。
use
xlink:href
是否可以使用svg精灵并以这种方式在ReactJS中加载它们?
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 }} />; }