comment mettre en place une ligne svg avec webpack

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

Je suis à la suite de la réagir-webpack-livre de recettes.

J'ai mon webpack.config configurer correctement avec le fichier loader.

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

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

qui fonctionne très bien, mais je veux avoir une ligne image svg, comment dois-je faire pour y inclure mon logo.svg en ligne dans mon réagir composant?

import React, { Component } from 'react'

class Header extends Component {

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

export default Header

InformationsquelleAutor svnm | 2015-12-13

25

Fait de Michelle réponse m'a orienté dans la bonne direction, et qui fonctionne très bien pour le chargement d'un fichier svg avec webpack et de l'utiliser comme votre <img> src

Cependant à réellement obtenir la ligne svg, j'avais besoin de faire ce qui suit:

Au lieu de fichier-loader utiliser svg-inline-chargeur que votre svg chargeur:

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

Ensuite de charger le svg en ligne 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 y est une ligne svg wrapper pour réagir svg-inline-réagir qui serait une autre option à la place de la <div dangerouslySetInnerHTML={{__html: mySvg}} />
- juste une remarque, cela ne fonctionne pas du tout avec un serveur de rendu... c'est pas aussi utile que je le pensais. Je suis allé à l'utilisation d'un svg comme une image d'arrière-plan. De plus, il ne semble gonfler le JavaScript bundle ainsi comme inline svg de le faire, bien sûr, cela dépendra de la manière dont optimisé le svgs sont.
- Il y a une bonne étude de cas posté par Twitter qui montre pourquoi vous devriez pas utiliser "dangerouslySetInnerHTML' pour l'affichage SVGs: medium.com/@paularmstrong/...
InformationsquelleAutor svnm
15

Vieille question, mais je n'ai pas vu cette solution n'importe où, alors j'ai décidé de le poster, en espérant que cela aidera quelqu'un.

Si vous voulez être en mesure de style de ces icônes SVG, vous pouvez les charger avec le raw du chargeur:

webpack.config.js:
```
 { 
      test: /\.svg$/, 
      loader: 'raw-loader' 
 } 
```
L'importation de mon point de vue:
```
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ée):
```
<button id="closeModal">
  {{{closeIcon}}}
</button>
```
de cette façon, les données SVG sera inséré à la place des crochets et ressembler à 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>
```
Je suis en utilisant colonne vertébrale avec Moustache moteur de template avec Webpack 2.5.1
- Aller au travail avec une chaîne basée sur un modèle de la bibliothèque comme épine dorsale + la moustache ou la vue, mais pas à réagir, car il utilise JSX au lieu de chaînes brutes. Probablement ne fonctionne pas avec le "dangerouslySetInnerHTML" si...
InformationsquelleAutor jsaddwater

J'espère que ma réponse tardive sera encore utile pour quelqu'un, parce que je n'en aime aucune des options mentionnées ci-dessus.

La réagir-svg-chargeur webpack chargeur vous permet d'importer des icônes SVG comme JSX composants:

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 le minimum de config 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 produit juste le fichier svg contenu, sans supplément wrappers et dangerouslySetInnerHTML dans votre code.

InformationsquelleAutor Stas Gavrylov

10

Si je ne me trompe pas, depuis que vous utilisez le fichier loader, vous pouvez l'utiliser de la même façon que pour tout autre besoin. Webpack tournera require("./logo.svg") dans un chemin d'accès à un fichier, qu'il émet lorsqu'il bundles.
```
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
```
- qui fonctionne parfaitement, merci
- Oui, cela a fonctionné pour moi aussi! Merci Michelle!!
- Il ne fonctionne pas pour moi 🙁 pourriez-vous poster votre webpack.config.js? Peut-être que je peux repérer mon erreur là.
- A travaillé pour moi seulement après j'ai redémarré npm start
- Ne fonctionne pas. S'il vous plaît montrer votre webpack fichier.
- et cela s'ajoute le svg inline? ou envelopper le svg dans une balise d'image?
InformationsquelleAutor Michelle Tilley

Semblable à une autre réponse à l'aide de Réagir, il est également pratique pour Vue plugin ainsi.

vue-svg-chargeur il suffit de jeter dans votre configuration et commencer à l'utiliser. La bonne chose est qu'il permet également de faire fonctionner votre svg par 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>

InformationsquelleAutor Brian Henze

0

Ici est un simple non-réagir solution.
1. Installer Svg inline chargeur
2. Dans webpack.config.js ajouter { test: /\.svg$/, loader: 'svg-inline-loader' }
3. Dans votre fichier js importation svg image et l'ajouter à un élément du DOM comme
```
  import Svg from './svg.svg';

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

    element.innerHTML = Svg;

    return element;
  }

  document.body.appendChild(component());
```
InformationsquelleAutor Dmitry

Vous devez vous connecter pour publier un commentaire.