dangerouslySetInnerHTMLを使用せずにReactでSVGを使用するにはどうすればよいですか？

Question

Facebookのアイコンがフッターで使用できるようにReactコンポーネントを作成しました。残念ながら、dangerouslySetInnerHTMLを使用しないとアイコンが表示されますが、壊れているように見えます。ここで

は、Facebookのコンポーネントのコードです：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Facebook extends React.Component{ 
render() { 
    var svgString = '<?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><div><span id="facebook"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652" style="enable-background:new 0 0 49.652 49.652;" xml:space="preserve" class="icon"><g><circle cx="25" cy="25" r="20" class="circle" fill="white"/><path d="M24.826,0C11.137,0,0,11.137,0,24.826c0C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z" /></g></svg></span>' 
    return (
    <div> 
    <div dangerouslySetInnerHTML={{ __html: svgString }} /> 
    </div> 
    ) 
} 
}; 


export default Facebook; 

、ここでは

<?xml version="1.0" encoding="iso-8859-1"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<div> 
    <span id="facebook"> 
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652" style="enable-background:new 0 0 49.652 49.652;" xml:space="preserve" class="icon"> 
    <g> 
     <circle cx="25" cy="25" r="20" class="circle" fill="white"/> 
     <path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826 
      C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845 
      v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z 
      " /> 
    </g> 

    </svg> 
</span> 
</div> 

Answer 1

SVGsが反応でネイティブに動作するはずです、DOCTYPEを設定する必要はありません、元のSVGのためのコードであり、 XMLエンコーディング、バージョン、または名前空間（JSXはXMLではありません。XMLのようなものです）：

render() { 
    return (
    <div> 
     <svg version="1.1" id="Capa_1" x="0px" y="0px" width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652" style="enable-background:new 0 0 49.652 49.652;" className="icon"> 
     <g> 
      <circle cx="25" cy="25" r="20" className="circle" fill="white"/> 
      <path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826 
      C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845 
      v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z 
      " /> 
     </g> 
     </svg> 
    </div> 
) 
} 

classがclassNameであることを確認してください。