javascript - react svg icon

cómo configurar un svg en línea con webpack

Question

Me pregunto cómo configurar un svg en línea con el paquete web?

Estoy siguiendo el libro de recetas de webpack .

Tengo mi webpack.config configurado correctamente con el cargador de archivos .

Sin embargo, el ejemplo muestra el uso de una imagen de fondo como esta:

.icon {
   background-image: url(./logo.svg);
}

que funciona bien, pero quiero tener una imagen svg en línea, ¿cómo hago esto para incluir mi logo.svg en línea en mi componente de reacción?

import React, { Component } from ''react''

class Header extends Component {

  render() {
    return (
        <div className=''header''>
            <img src={''./logo.svg''} />
        </div>
    );
  }
};

export default Header

Answer 1

Si no me equivoco, ya que está usando el cargador de archivos, puede utilizarlo de la misma manera que cualquier otro requiere. El paquete web hará que se require("./logo.svg") una ruta a un archivo, que se emitirá cuando se agrupe.

import React, { Component } from ''react''

import mySvg from ''./logo.svg''

class Header extends Component {

  render() {
    return (
        <div className=''header''>
            <img src={mySvg} />
        </div>
    );
  }
};

export default Header

Answer 2

Una vieja pregunta, pero no vi esta solución en ningún lado, así que decidí publicarla, con la esperanza de que ayude a alguien.

Si desea poder diseñar esos iconos SVG, es posible que desee cargarlos con el cargador sin formato:

webpack.config.js:

 { 
      test: //.svg$/, 
      loader: ''raw-loader'' 
 } 

La importación en mi opinión:

import closeIcon from ''svg/ic_close_black_24px.svg''; 

La plantilla (Moustache usa 3 corchetes para insertar los datos SVG (URL) sin codificar):

<button id="closeModal">
  {{{closeIcon}}}
</button>

De esta forma, los datos SVG se insertarán en lugar de los corchetes y se verán así:

<button id="closeModal">
  <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
  </svg>
</button>

Estoy usando Backbone con el motor de plantillas Moustache con Webpack 2.5.1

Answer 3

En realidad, la respuesta de Michelle me apuntó en la dirección correcta, y eso funciona muy bien para cargar un archivo svg con un paquete web y usarlo como tu <img> src

Sin embargo, para obtener realmente la svg en línea, necesitaba hacer lo siguiente:

En lugar de usar el cargador de archivos, usa svg-inline-loader como tu cargador svg:

{ test: //.svg$/, loader: ''svg-inline-loader'' }

Luego, para cargar svg inline en un componente:

import React, { Component } from ''react''
import logo from "./logo.svg";

class Header extends Component {

  render() {
    return (
        <div className=''header''>
          <span dangerouslySetInnerHTML={{__html: logo}} />
        </div>
    );
  }
};

export default Header

Parece que hay un contenedor svg en línea para reaccionar svg-inline-react, que sería otra opción en lugar de <div dangerouslySetInnerHTML={{__html: mySvg}} />