SVG使用标签和ReactJS
所以通常包括我需要简单样式的大部分SVG图标，我都这样做：
<svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> 现在我一直在玩ReactJS，后来评估它作为我的新前端开发堆栈中的一个可能的组件，但是我注意到在支持的标签/属性列表中，既不支持use xlink:href也不支持。
是否有可能使用svg sprites并以这种方式在ReactJS中加载它们？
React并不支持所有的SVG标签，这里有一个支持的标签列表。 他们正在这张票上工作更广泛的支持，f.ex。
一个常见的解决方法是注入HTML代替不支持的标签f.ex：
render: function() { var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />'; return <svg dangerouslySetInnerHTML={{__html: useTag }} />; }
从React 0.14开始 ， xlink:href可以通过React作为属性xlinkHref 。 它被提到0.14 版本发布说明中的“显着增强”之一。
<!-- REACT JSX: --> <svg> <use xlinkHref='/svg/svg-sprite#my-icon' /> </svg> <!-- RENDERS AS: --> <svg> <use xlink:href="/svg/svg-sprite#my-icon"></use> </svg>
更新3 ：在写这篇文章的时候，可以在这里findReact master的SVG属性。
更新2 ：现在所有的 svg属性现在应该可以通过反应（参见合并的svg属性PR ）。
更新1 ：您可能需要关注GitHub上的svg相关问题 ，以获取更多的SVG支持登陆。 有作品的发展。
演示：
const svgReactElement = ( <svg viewBox="0 0 667 667" width="100" height="100" > <image width="667" height="667" xlinkHref="https://i.imgur.com/w7GCRPb.png"/> </svg> ) var resultHtml = ReactDOMServer.renderToStaticMarkup(svgReactElement) document.getElementById('render-result-html').innerHTML = escapeHtml(resultHtml) ReactDOM.render(svgReactElement, document.getElementById('render-result') ) function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"); }
<script src="ajax/libs/react/16.0.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom-server.browser.development.js"></script> <h2>Render result of rendering:</h2> <pre><svg viewBox="0 0 667 667" width="100" height="100" > <image width="667" height="667" xlinkHref="https://i.imgur.com/w7GCRPb.png" /> </svg></pre> <h2><code>ReactDOMServer.renderToStaticMarkup()</code> output:</h2> <pre id="render-result-html"></pre> <h2><code>ReactDOM.render()</code> output:</h2> <div id="render-result"></div>
正如Jon Surrell的回答中所述，现在支持使用标签。 如果你不使用JSX，你可以像这样实现它：
React.DOM.svg( { className: 'my-svg' }, React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' ) )
如果您遇到xlink:href ，那么您可以通过删除冒号并添加添加的文本： xlinkHref来获得ReactJS中的等效xlinkHref 。
您可能最终会在SVG中使用其他名称空间标记，如xml:space等。相同的规则适用于它们（即， xml:space变成xmlSpace ）。
我创build了一个小工具来解决这个问题： 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>
