SVG использует тег и ReactJS

Question

SVG использует тег и ReactJS

поэтому обычно, чтобы включить большинство моих значков SVG, которые требуют простого стиля, я делаю:

<svg>

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

</svg>

Теперь я играл с ReactJS в последнее время, оценивая его как возможный компонент в моем новом интерфейсном стеке разработки, однако я заметил, что в его списке поддерживаемых тегов/атрибутов ни один use или xlink:href поддерживаются.

можно ли использовать спрайты svg и загружать их таким образом в ReactJS?

621 5

svg reactjs sprite

5 ответов:

Comments

Ничего не найдено.

David · Accepted Answer · 2018-09-07 16:12:09

обновление сентябрь 2018: это решение устарело, читать Джон!--5--> вместо.

--

React не поддерживает все теги SVG как вы говорите, есть список поддерживаемых тегов здесь. Они работают над более широкой поддержкой, f. ex in этот билет.

общим обходным путем является введение HTML вместо не поддерживаемых тегов, например:
render: function() {
    var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}

Jon Surrell · Accepted Answer · 2018-07-09 14:46:13

MDN говорит, что xlink:hrefосуждается в пользу href. Вы должны быть в состоянии использовать напрямую. Приведенный ниже пример включает в себя обе версии.

по состоянию на реагировать 0.14,xlink:href доступно через React как свойство xlinkHref. Он упоминается как один из" заметных улучшений " в заметки на 0.14.

<svg>
  <use xlinkHref='/svg/svg-sprite#my-icon' />
</svg>


<svg>
  <use xlink:href="/svg/svg-sprite#my-icon"></use>
</svg>
обновление 2018-06-09: добавлена информация о href vs xlink:href атрибуты и обновленный пример, чтобы включить оба. спасибо @devuxer

обновление 3: на момент написания статьи можно найти свойства React master SVG здесь.

обновление 2: похоже, что все атрибуты svg теперь должны быть доступны через react (см. merged svg атрибут PR).

обновление 1: вы можете хотеть держите глаз на проблема, связанная с svg на GitHub для дополнительной посадки поддержки 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>

HoldOffHunger · Accepted Answer · 2017-10-24 03:19:59

если вы столкнулись xlink:href, то вы можете получить эквивалент в ReactJS, удалив двоеточие и camelcasing добавленный текст:xlinkHref.

вы, вероятно, в конечном итоге будете использовать другие теги пространства имен в SVG, например xml:space и т. д.. То же самое правило относится и к ним (т. е. xml:space становится xmlSpace).

mhanisch · Accepted Answer · 2016-03-07 14:56:45

Как уже сказал в ответ Джон Surrell, использовать-теги поддерживаются. Если вы не используете JSX, вы можете реализовать его следующим образом:
React.DOM.svg( { className: 'my-svg' },
    React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)

Ahrengot · Accepted Answer · 2016-02-13 17:23:32

Я создал небольшой помощник, который работает вокруг этой проблемы: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>