Reagieren: SVG-Inhalt als Variable zurückgeben?

Question

ich derzeit tue dies:

class Checked extends React.Component { 
    render() { 
     return (
      <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24"> 
       <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/> 
      </svg> 
     ); 
    } 
} 

Aber ich möchte so etwas zu tun:

import imgTable from '../img/catering_table.svg' 

class Checked extends React.Component { 
    render() { 
     return imgTable; 
    } 
} 

Warum funktioniert dies nicht? Gebe ich hier die Variable zurück und nicht den tatsächlichen Inhalt? Ich hätte gedacht, die beiden sind gleichwertig.

PS: Webpack ist korrekt eingerichtet, ich verwende Import irgendwo anders in dieser Datei, also ist es das nicht. (Ich verwende GatsbyJS hier übrigens)

Answer 1

Option 1: Wickeln mit einer staatenlos Komponente:

const ImgTable =() => (
    <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24"> 
     <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/> 
    </svg> 
); 

export default ImgTable; 

Jetzt können Sie es als eine Komponente importieren:

import ImgTable from '../img/ImgTable' 

class Checked extends React.Component { 
    render() { 
     return <ImgTable />; 
    } 
} 

Option 2: Verwenden Sie dangerouslySetInnerHTML (beachten Sie den Namen). so etwas wie babel-plugin-transform-svg-import-to-string Allerdings müssen Sie die SVG-String auf Import konvertieren mit:

import imgTable from '../img/catering_table.svg' // this will return a string 

class Checked extends React.Component { 
    render() { 
     return <div dangerouslySetInnerHTML={{__html: imgTable }} />; 
    } 
} 

Answer 2

babel-plugin-inline-react-svg ist ein Plugin, das Ihnen genau, ermöglicht das tun, was Sie in Ihrer Frage angedeutet. Es erstellt einfach eine Reaktionskomponente für jeden Knoten in der SVG-Datei. Dann wird der gesamte Komponentenbaum mit einem Wurzelelement umschlossen, das Sie leicht benennen können.

Importieren Sie svg so import SampleSVG from './sample.svg';. Und rendern Sie es in Ihrer Anwendung so <SampleSVG />. Es ist sicher und einfach.