Итак, чтобы включить большинство моих значков SVG, требующих простого стилирования, я делаю:
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
Теперь я играл с ReactJS, так как в последнее время он оценил его как возможный компонент в моем новом стеке для разработчиков, но я заметил, что в его списке поддерживаемых тегов/атрибутов поддерживаются не use
или xlink:href
.
Можно ли использовать svg спрайты и загрузить их таким образом в ReactJS?
Обновление сентябрь 2018: это решение устарело, вместо этого прочитайте ответ Джонс.
-
Реагировать оленью кожу поддерживают все тег SVG, как вы говорите, есть список поддерживаемых тегов здесь. Они работают над более широкой поддержкой, например, в этом билете.
Обычный обходной путь - вместо этого вводить HTML для неподдерживаемых тегов, например:
render: function() {
var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}
dangerouslySetInnerHTML
. Вы можете использовать xlinkHref
как указано ниже.
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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"); }
<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><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></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
, вы можете получить эквивалент в ReactJS, удалив двоеточие и верблюжку добавленного текста: xlinkHref
.
В SVG вы, вероятно, будете использовать другие теги пространства имен, например xml:space
и т.д. То же самое правило применимо к ним (т.е. xml:space
становится xmlSpace
).
Как уже было сказано в ответ Jon Surrell, теперь используются теги использования. Если вы не используете JSX, вы можете реализовать его следующим образом:
React.DOM.svg( { className: 'my-svg' },
React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)
Просто используйте href
. Это сработало для меня. для React JS
Я создал небольшой помощник, который работает вокруг этой проблемы: 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>
<use xlinkHref="/svg/svg-sprite#my-icon" />
.xlink:href
устарела, теперь предполагается использовать толькоhref
- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href