演示：

Question

通常情况下，要包含大多数需要简单样式的SVG图标，我会这样做：

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

现在我一直在玩ReactJS，因为它最近将它作为我新的前端开发堆栈中的一个可能组件进行评估，但是我注意到它在支持的标签/属性列表中，use或{{1支持。

是否可以在ReactJS中使用svg sprite并以这种方式加载它们？

Answer 1

MDN表示xlink:href is deprecated支持href。您应该可以直接使用href属性。以下示例包括两个版本。

从 React 0.14 开始，xlink:href可通过React作为属性xlinkHref使用。它被称为release notes中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>

更新2018-06-09：添加了有关href vs xlink:href属性和更新示例的信息以包含这两者。 Thanks @devuxer

更新3 ：在撰写本文时，可以找到React主SVG属性here。

更新2 ：现在看来所有 svg属性应该通过react提供（请参阅合并svg attribute PR）。

更新1 ：您可能需要留意GitHub上的svg related issue以获得额外的SVG支持登陆。工程有进展。

演示：

const svgReactElement = (
  <svg
    viewBox="0 0 1340 667"
    width="100"
    height="100"
  >
    <image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
    { /* Deprecated xlink:href usage */ }
    <image width="667" height="667" x="673" 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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom-server.browser.development.js"></script>

<h2>Render result of rendering:</h2>
<pre>&lt;svg
  viewBox=&quot;0 0 1340 667&quot;
  width=&quot;100&quot;
  height=&quot;100&quot;
&gt;
  &lt;image width=&quot;667&quot; height=&quot;667&quot; href=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
  { /* Deprecated xlink:href usage */ }
  &lt;image width=&quot;667&quot; height=&quot;667&quot; x=&quot;673&quot; xlinkHref=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
&lt;/svg&gt;</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>

Answer 2

2018年9月更新：不推荐使用此解决方案，请改为阅读Jon’s answer。

-

React不支持所有SVG标记，如您所说，有一个支持的标记列表here。他们正在this ticket进行更广泛的支持，f.ex。

常见的解决方法是为不支持的标记注入HTML，f.ex：

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

Answer 3

如果您遇到xlink:href，那么您可以通过删除冒号并使用添加的文本xlinkHref来获取ReactJS中的等效内容。

您最终可能会在SVG中使用其他命名空间标记，例如xml:space等。同样的规则适用于它们（即xml:space变为xmlSpace）

Answer 4

正如Jon Surrell的回答中所说，现在支持使用标签。如果您没有使用JSX，可以像这样实现它：

React.DOM.svg( { className: 'my-svg' },
    React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)

Answer 5

我创建了一个解决此问题的小助手：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>

Answer 6

SVG可以导入并直接用作React代码中的React组件。

import React from 'react';
import {ReactComponent as ReactIcon} from './icon.svg';

const App = () => {
  return (
    <div className="App">
      <ReactIcon />
    </div>
  );
}
export default App;

SVG使用标签和ReactJS

6 个答案:

演示：