如何在 React 中使用 SVG 而不使用危險的SetInnerHTML？

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;

這是原始 SVG 的代碼

<?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

取決於當前使用的反應版本

適用於CRA版本3-

您可以簡單地做到這一點-將您的svg保存在其他文件中，例如facebookIcon.svg

<?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>

import React from 'react';
import ReactDOM from 'react-dom';
import { ReactComponent as fbIcon } from './facebookIcon.svg';

class Facebook extends React.Component{
 render() {
   return (
     <div>
      <fbIcon />
     </div>
   )
 }
};


export default Facebook;

對於CRA版本2-您可以檢查此鏈接-https://egghead.io/lessons/react-add-svgs-as-react-components-with-create-react-app-2-0

Answer 2

SVG應該可以在React中原生運行，無需設置DOCTYPE和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 。

Answer 3

使用像這樣的庫svg-to-jsx