Réagir: Renvoyer le contenu SVG comme variable?

Question

que je fais actuellement ceci:

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> 
     ); 
    } 
} 

Mais je voudrais faire quelque chose comme ceci:

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

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

Pourquoi cela ne fonctionne pas? Est-ce que je retourne la variable ici et pas le contenu réel? J'aurais pensé que les deux sont équivalents.

PS: Webpack est configuré correctement, j'utilise des importations ailleurs dans ce fichier, donc ce n'est pas ça. (J'utilise GatsbyJS ici par la voie)

Answer 1

Option 1: enveloppe avec un composant sans état:

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; 

Maintenant, vous pouvez l'importer en tant que composant:

import ImgTable from '../img/ImgTable' 

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

Option 2: utilisez dangerouslySetInnerHTML (notez le nom). Cependant, vous devrez convertir le SVG en chaîne à l'importation en utilisant quelque chose comme babel-plugin-transform-svg-import-to-string:

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 est un plug-in qui vous permet de faire exactement ce que vous avez fait allusion à votre question. Il crée simplement un composant de réaction pour chaque noeud dans le fichier svg. Ensuite, il enveloppe l'arborescence entière des composants avec un élément racine que vous pouvez facilement nommer.

Importer svg comme ceci import SampleSVG from './sample.svg';. Et rendez-le dans votre application comme ceci <SampleSVG />. C'est sûr et simple.