sprite - SVG使用标签和React

所以通常要包含大多数需要简单样式的SVG图标,我这样做:

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

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

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

ryanzec asked 2019-08-11T09:42:40Z
5个解决方案
218 votes

MDN表示不推荐使用<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>,转而使用xlink:href.您应该能够直接使用href属性。 以下示例包括两个版本。

自React 0.14起,<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>可通过React获得,作为属性xlink:href。它被称为&#34;值得注意的增强之一&#34; 在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:添加了有关<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>xlink:href属性和更新示例的信息以包括两者。 谢谢@devuxer

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

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

更新1:您可能需要关注GitHub上与svg相关的问题,以获得额外的SVG支持登陆。 工程有进展。

演示:

<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>
<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>

Jon Surrell answered 2019-08-11T09:44:19Z
43 votes

2018年9月更新:不推荐使用此解决方案,请阅读Jon的答案。

-

如你所说,React不支持所有SVG标记,这里有一个支持的标记列表。 他们正在努力提供更广泛的支持,f .ex在这张票中。

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

render: function() {
    var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}
David Hellsing answered 2019-08-11T09:43:08Z
5 votes

如果您遇到xlink:href,那么您可以通过删除冒号并使用添加的文本来获取ReactJS中的等效项:xml:space

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

HoldOffHunger answered 2019-08-11T09:44:53Z
4 votes

正如在Jon Surrell的回答中所说,现在支持使用标签。 如果您不使用JSX,可以像这样实现:

React.DOM.svg( { className: 'my-svg' },
    React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)
mhanisch answered 2019-08-11T09:45:19Z
0 votes

我创建了一个解决这个问题的小帮手:[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>
Ahrengot answered 2019-08-11T09:45:59Z
translate from https://stackoverflow.com:/questions/26815738/svg-use-tag-and-reactjs