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


114

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

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

今、私は遅れて私の新しいフロントエンド開発スタックの可能性の成分として、それを評価するようReactJSで演奏されているしかし、私は、サポートされているタグ/属性のリストであることに気づいていないどちらusexlink:hrefサポートされています。

svgスプライトを使用して、ReactJSでこのようにロードすることは可能ですか?


28
今後の訪問者は、を使用できます<use xlinkHref="/svg/svg-sprite#my-icon" />
David Gilbertson、2016年

6
xlink:href今だけの使用になって、廃止されましたhref- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
マット・グリア

2
@MattGreer 2018年時点でも、Safariはまだ必要なxlink:hrefので、使用する必要があります。実際のWebアプリケーションは、ブラウザー機能の共通点を使用するか、特定の回避策/ポリフィルを実装する必要があります。
トビア2018

:私はちょうど下のジョンSurrellの答えで解決した、このエラーを検索ヘルプ他の人にこのコメントを追加しているProperty 'xlink' does not exist on type 'SVGProps<SVGImageElement>
ジョー・M

回答:


50

2018年9月の更新:このソリューションは非推奨です。代わりにJonの回答を読んでください。

-

あなたが言うように、ReactはすべてのSVGタグをサポートしているわけではありません。サポートされているタグのリストがここにあります。彼らは、より広い支持体の上で作業しているf.ex このチケットを

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

render: function() {
    var useTag = '<use xlink:href="https://stackoverflow.com/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}

19
いいえ、使用しないでくださいdangerouslySetInnerHTMLxlinkHref下記のように使用できます。
トビア2018

著者はおそらくこれを受け入れられた回答として削除する必要があります
Aquasar

267

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

とおり0.14反応しxlink:hrefプロパティとして反応を介して利用可能です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

更新3:執筆時点では、ReactマスターSVGプロパティはここにあります

Update 2すべての svg属性がreactを介して利用できるようになったようです(マージされたsvg属性PRを参照)。

アップデート1:GitHubのsvg関連の問題を監視して、追加の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>


2
> 2015年12月25日更新:すべてのsvg属性がreact経由で利用できるようになったようです(マージされたsvg属性PRを参照)。これらのsvg属性を使用する標準的な方法はありますか?xlink:href => xlinkHrefの場合のように、それらはすべてキャメルケースになりますか?
majorBummer 2016


2
これは実際に正しい答えである必要があります。特に、現在選択されている答えがdangerouslySetInnerHTMLを推奨している場合、これは危険です
feihcsim

1
MDN(developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href)によると、xlink:hrefは非推奨でありhref、ネームスペースプレフィックスなしで使用することをお勧めします。(ただし、TypeScriptを使用している場合、タイピングはこれを反映するようにまだ更新されていません。)
devuxer

執筆時点では、xlink:hrefはSafariでサポートされていますが、hrefはサポートされていません。
neoncube 2018

7

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

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


6

ジョン・サレルの回答ですでに述べたように、使用タグが現在サポートされています。JSXを使用していない場合は、次のように実装できます。

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

0

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

SVGをインポートして、ReactコードのReactコンポーネントとして直接使用できます。

import React from 'react';
import {ReactComponent as ReactIcon} from './icon.svg';

const App = () => {
  return (
    <div className="App">
      <ReactIcon />
    </div>
  );
}
export default App;
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.