Использовать тег SVG и ReactJS

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

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

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

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

+82
08 нояб. '14 в 9:44
источник поделиться
6 ответов

Обновление сентябрь 2018: это решение устарело, вместо этого прочитайте ответ Джонс.

-

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

Обычный обходной путь - вместо этого вводить HTML для неподдерживаемых тегов, например:

render: function() {
    var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}
+38
08 нояб. '14 в 22:29
источник

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-06-09: добавлена информация об xlink:href href vs xlink:href и обновлен пример, включающий оба. Спасибо @devuxer

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

Обновление 2. Похоже, что все атрибуты svg теперь должны быть доступны через реакции (см. Объединенный атрибут 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>
+202
07 окт. '15 в 14:22
источник

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

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

+4
04 окт. '17 в 19:23
источник

Как уже было сказано в ответ Jon Surrell, теперь используются теги использования. Если вы не используете JSX, вы можете реализовать его следующим образом:

React.DOM.svg( { className: 'my-svg' },
    React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)
+3
07 мар. '16 в 12:18
источник

Просто используйте href. Это сработало для меня. для React JS

0
05 февр. '19 в 6:36
источник

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

Посмотрите другие вопросы по меткам или Задайте вопрос