[解決済み] SVGユースタグとReactJS

質問

シンプルなスタイリングを必要とするSVGアイコンのほとんどを含めるために、通常はそうしています。

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

最近、私はReactJSを私の新しいフロントエンド開発スタックの可能なコンポーネントとして評価して遊んでいます。 use または xlink:href がサポートされています。

ReactJSでsvgスプライトを使い、このように読み込むことは可能でしょうか？

どのように解決するのですか？

2018年9月更新 : この解決策は非推奨です。 ジョンの回答 をお読みください。

--

ReactはおっしゃるとおりすべてのSVGタグをサポートしているわけではなく、サポートされているタグのリストがあります。 はこちら . より幅広いサポートに取り組んでおり、例えば このチケット .

一般的な回避策は、サポートされていないタグの代わりにHTMLを注入することです（例．

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