web-dev-qa-db-ja.com

SVGはタグとReactJSを使用します

したがって、通常、シンプルなスタイル設定が必要なほとんどのSVGアイコンを含めるには、次のようにします。

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

今、私はReactJSを新しいフロントエンド開発スタックの可能なコンポーネントとして評価していますが、サポートされているタグ/属性のリストで、useもxlink:hrefもサポートされています。

Svgスプライトを使用し、ReactJSでこの方法でロードすることは可能ですか？

svgspritereactjs
98
ryanzec

2018年9月更新：このソリューションは非推奨です。代わりに Jon’s answer をお読みください。

-

あなたが言うように、ReactはすべてのSVGタグをサポートしているわけではありません。サポートされているタグのリストがあります here 。 this ticket のf.exの幅広いサポートに取り組んでいます。

一般的な回避策は、サポートされていないタグf.exの代わりにHTMLを挿入することです：

render: function() {
    var useTag = '<use xlink:href="/svg/svg-Sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}
45
David Hellsing

MDNは、xlink:href非推奨 でhrefを支持していると言っています。 href属性を直接使用できるはずです。以下の例には両方のバージョンが含まれています。

React 0.14以降、xlink:hrefはReactを介してプロパティxlinkHrefとして使用できます。 0.14の リリースノート で「注目すべき拡張機能」の1つとして言及されています。

<!-- 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の更新：href vs xlink:href属性に関する情報を追加し、両方を含めるように例を更新しました。 ありがとう@ devuxer

Update 3：執筆時点で、ReactマスターSVGプロパティは here です。

更新2：allsvg属性がreactを介して利用可能になったようです（マージ済みを参照- 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>
227
Jon Surrell

xlink:hrefに遭遇した場合、ReactJSでコロンを削除し、追加されたテキストxlinkHrefをキャメルケース化することで同等のものを取得できます。

おそらく最終的にはxml:spaceなど、SVGの他の名前空間タグを使用することになります。同じルールが適用されます（つまり、xml:spaceはxmlSpaceになります）。

5
HoldOffHunger

Jon Surrellの回答で既に述べたように、use-tagsは現在サポートされています。 JSXを使用していない場合は、次のように実装できます。

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

この問題を回避する小さなヘルパーを作成しました： 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
Ahrengot