web-dev-qa-db-fra.com

comment configurer un svg en ligne avec webpack

Je me demande comment mettre en place un svg en ligne avec webpack?

Je suis le react-webpack-cookbook .

J'ai mon webpack.config configuré correctement avec le chargeur de fichiers .

Cependant, l'exemple montre l'utilisation d'une image d'arrière-plan comme celle-ci:

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

qui fonctionne bien, mais je veux avoir une image svg en ligne, comment puis-je inclure des mon logo.svg inline dans mon composant réact?

import React, { Component } from 'react'

class Header extends Component {

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

export default Header
javascriptsvgreactjswebpackloader
33
svnm

En fait, la réponse de Michelle m'a orienté dans la bonne direction, et cela fonctionne bien pour charger un fichier svg avec webpack et l'utiliser comme votre <img> src

Cependant, pour obtenir le svg en ligne, je devais procéder comme suit:

Au lieu du chargeur de fichiers, utilisez svg-inline-loader comme chargeur svg:

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

Ensuite, pour charger le svg inline dans un composant:

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

Il semble qu’il existe un wrapper svg en ligne pour react svg-inline-react , ce qui serait une autre option à la place du <div dangerouslySetInnerHTML={{__html: mySvg}} />

25
svnm

Vieille question, mais comme je n’avais jamais vu cette solution, j’ai décidé de la poster, espérant que cela aiderait quelqu'un.

Si vous voulez pouvoir styliser ces icônes SVG, vous pouvez les charger avec le chargeur brut:

webpack.config.js:

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

L'import à mes yeux:

import closeIcon from 'svg/ic_close_black_24px.svg';

Le modèle (Moustache utilise 3 crochets pour insérer les données SVG (URL) non codées):

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

de cette façon, les données SVG seront insérées à la place des crochets et ressembleront à ceci:

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

J'utilise le moteur de template Backbone with Mustache avec Webpack 2.5.1

16
jsaddwater

J'espère que ma réponse tardive sera toujours utile pour quelqu'un, parce que je n'aime aucune des options susmentionnées.

Le webpack loader (react-svg-loader) == vous permet d'importer des icônes SVG telles que des composants JSX:

import Logo from './logo.svg';

class App extends Component {
  render() {
    return (
      <div className="App">
          <Logo fill="red" className="logo" width={50} height={50} />
      </div>
    );
  }
}

et la configuration minimale ressemble à ceci:

{
  test: /\.svg$/,
  use: [
    {
      loader: "babel-loader"
    },
    {
      loader: "react-svg-loader",
      options: {
        jsx: true // true outputs JSX tags
      }
    }
  ]
}

La meilleure partie est qu’il ne fait que sortir le contenu du fichier svg, sans wrappers supplémentaires et dangerouslySetInnerHTML dans votre code.

15
Stas Gavrylov

Si je ne me trompe pas, puisque vous utilisez le chargeur de fichiers, vous pouvez l'utiliser de la même manière que tout autre besoin. Webpack transformera require("./logo.svg") en un chemin d'accès à un fichier, qu'il émettra lorsqu'il sera groupé.

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
11
Michelle Tilley

Semblable à une autre réponse utilisant React, il existe également un plugin pratique Vue.

vue-svg-loader Il suffit de le jeter dans votre configuration et de commencer à l’utiliser. Ce qui est bien, c’est que votre svg sera exécuté via SVGO pour l’optimiser.

Configuration 

{
    test: /\.svg$/,
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
  options: {
    // optional [svgo](https://github.com/svg/svgo) options
    svgo: {
      plugins: [
        {removeDoctype: true},
        {removeComments: true}
      ]
    }
  }
}

Utilisation 

<template>
  <nav id="menu">
    <a href="...">
      <SomeIcon class="icon" />
      Some page
    </a>
  </nav>
</template>

<script>
import SomeIcon from './assets/some-icon.svg';

export default {
  name: 'menu',
  components: {
    SomeIcon,
  },
};
</script>
4
Brian Henze

Voici une solution simple sans réaction.

  1. Installer chargeur en ligne SVG
  2. Dans webpack.config.js, ajoutez { test: /\.svg$/, loader: 'svg-inline-loader' }
  3. Dans votre fichier js, importez l'image svg et ajoutez-la à un élément DOM comme
  import Svg from './svg.svg';

  function component() {
    const element = document.createElement('div');

    element.innerHTML = Svg;

    return element;
  }

  document.body.appendChild(component());
1
Dmitry