SVG使用标签和ReactJS


114

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

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

现在,我一直在玩ReactJS作为它的后期评估在我的新的前端开发堆栈可能的成分,但是我注意到,在其支持的标记/属性列表,无论是usexlink:href支持。

是否可以使用svg精灵并以这种方式在ReactJS中加载它们?


28
对于将来的访客,您现在可以使用<use xlinkHref="/svg/svg-sprite#my-icon" />
大卫·吉尔伯森

6
xlink:href已过时,现在应该只是使用href- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
马特·格里尔

2
@MattGreer截至2018年,Safari仍然需要,xlink:href所以我们仍然需要使用它。实际的Web应用程序需要使用浏览器功能的公分母,或实现特定的解决方法/ polyfill。
Tobia '18

我只是添加此评论以帮助其他人搜索此错误,此错误已由Jon Surrell的以下答案解决:Property 'xlink' does not exist on type 'SVGProps<SVGImageElement>
Joe M

Answers:


50

2018年9月更新:不建议使用此解决方案,请阅读乔恩的答案

-

反应并不支持所有的SVG标签就像你说的,有支持的标签的列表在这里。他们正在努力获得更广泛的支持,如票证中的 f.ex 所示

常见的解决方法是为不支持的标签f.ex注入HTML:

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

19
不,不要使用dangerouslySetInnerHTML。您可以xlinkHref按如下所述使用。
Tobia '18

作者可能应该删除此作为公认的答案
Aquasar

267

MDN说,xlink:href 已被弃用的青睐href。您应该可以href直接使用该属性。下面的示例包括两个版本。

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>

2018年6月9日更新:添加了关于hrefvs xlink:href属性的信息,并更新了示例以包括这两个属性。谢谢 @devuxer

更新3:在撰写本文时,可以在此处找到React master SVG属性。

更新2:似乎所有 svg属性现在都可以通过react获得(请参阅合并的svg属性PR)。

更新1:您可能需要关注GitHub 上与svg相关的问题,以获取更多的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>


2
> 2015年12月25日更新:看来所有svg属性现在都可以通过react获得(请参阅合并的svg属性PR)。有使用这些svg属性的标准方法吗?它们会像xlink:href => xlinkHref一样都被驼装吗?
majorBummer

@majorBummer在这里
乔恩·苏雷尔

2
这确实需要是正确的答案,尤其是当当前选择的答案建议使用危险的
SetInnerHTML时

1
根据MDN(developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href),xlink:href已弃用,建议不要使用href名称空间前缀。(但是请注意,如果您使用的是TypeScript,则尚未更新类型以反映这种情况。)
devuxer

在撰写本文时,Safari支持xlink:href,但不支持href。
neoncube

7

如果遇到xlink:href,则可以通过删除冒号并打包添加的文本来获得ReactJS中的等效内容:xlinkHref

您最终可能会在SVG中使用其他名称空间标签,例如xml:space,等等。相同的规则适用于它们(即xml:space变为xmlSpace)。


6

正如乔恩·苏雷尔(Jon Surrell)的回答中所述,现在支持使用标记。如果您不使用JSX,则可以这样实现:

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

0

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

0

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;
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.