SVG使用标签和ReactJS [英] SVG use tag and ReactJS

问题描述

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

So normally to include most of my SVG icons that require simple styling, I do:

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

现在，我一直在使用ReactJS进行后期评估，因为它是我的新前端开发堆栈中可能的组件，但是我注意到在其支持的标签/属性列表中，都不支持use或xlink:href

Now I have been playing with ReactJS as of late evaluating it as a possible component in my new front-end development stack however I noticed that in its list of supported tags/attributes, neither use or xlink:href are supported.

是否可以使用svg精灵并将其以这种方式加载到ReactJS中?

Is it possible to use svg sprites and load them in this way in ReactJS?

推荐答案

2018年9月更新:不建议使用此解决方案，请阅读

Update september 2018: this solution is deprecated, read Jon’s answer instead.

-

正如您所说，React不支持所有SVG标签，其中列出了支持的标签此处.他们正在寻求更广泛的支持，例如此票证.

React doesn’t support all SVG tags as you say, there is a list of supported tags here. They are working on wider support, f.ex in this ticket.

常见的解决方法是为不受支持的代码f.ex注入HTML:

A common workaround is to inject HTML instead for non-supported tags, f.ex:

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

这篇关于SVG使用标签和ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！