因此,通常要包含大多数需要简单样式的SVG图标,我会:
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
最近,我一直在使用ReactJS,将其作为我新的前端开发堆栈中的一个可能组件进行判断,但我注意到,在其支持的标记/属性列表中,既不支持use
也不支持xlink:href
.
是否可以使用svg精灵并以这种方式在ReactJS中加载它们?
因此,通常要包含大多数需要简单样式的SVG图标,我会:
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
最近,我一直在使用ReactJS,将其作为我新的前端开发堆栈中的一个可能组件进行判断,但我注意到,在其支持的标记/属性列表中,既不支持use
也不支持xlink:href
.
是否可以使用svg精灵并以这种方式在ReactJS中加载它们?
Update september 2018:此解决方案已被弃用,请改为Jon’s answer.
--
React不支持所有SVG标记,正如您所说,这里有一个支持的标记列表.他们正在寻求更广泛的支持,f.ex在this ticket.
一个常见的解决方法是为不受支持的标记注入HTML,例如:
render: function() {
var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}