SVG使用标签和ReactJS
SVG使用标签和ReactJS
提问于 2014-11-08 17:44:18
因此，为了包含大多数需要简单样式的SVG图标，我这样做：
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>到目前为止，我一直在尝试将ReactJS作为我的新前端开发堆栈中的一个可能的组件，但是我注意到，在它支持的标记/属性列表中，use和xlink:href都不受支持。
是否可以在ReactJS中使用svg精灵并以这种方式加载它们？
回答 3
Stack Overflow用户
发布于 2017-10-05 03:23:21
如果您遇到xlink:href，那么您可以通过删除冒号并对添加的文本xlinkHref进行驼峰封装来获得ReactJS中的等价物。
您可能最终会在SVG中使用其他名称空间标记，如xml:space等。同样的规则也适用于它们(即，xml:space变成了xmlSpace)。
Stack Overflow用户
发布于 2016-03-07 20:18:00
正如Jon Surrell的回答中所说，现在支持use-tag。如果你没有使用JSX，你可以这样实现它：
React.DOM.svg( { className: 'my-svg' },
React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)Stack Overflow用户
发布于 2016-02-13 23:23:33
我创建了一个小帮助器来解决这个问题：https://www.npmjs.com/package/react-svg-use
首先是npm i react-svg-use -S，然后简单地
import Icon from 'react-svg-use'
React.createClass({
render() {
return (
<Icon id='car' color='#D71421' />
)
}
})然后这将生成以下标记
<svg>
<use xlink:href="#car" style="fill:#D71421;"></use>
</svg>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26815738
复制相关文章
相似问题