webentwicklung-frage-antwort-db.com.de

Wie erstelle ich eine Inline-Svg mit Webpack

Ich frage mich, wie ich eine Inline-Svg mit Webpack einrichten soll.

Ich folge dem React-Webpack-Kochbuch .

Ich habe meine webpack.config mit dem Dateilader korrekt eingerichtet.

Das Beispiel zeigt jedoch die Verwendung eines Hintergrundbilds wie folgt:

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

was funktioniert gut, aber ich möchte ein Inline-SVG-Bild haben. Wie kann ich das tun, um mein logo.svg in meine Reaktionskomponente einzufügen?

import React, { Component } from 'react'

class Header extends Component {

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

export default Header
33
svnm

Eigentlich hat mich Michelles Antwort in die richtige Richtung gelenkt, und das funktioniert gut, wenn ich eine SVG-Datei mit Webpack lade und sie als <img> - Quellcode verwende

Um jedoch das Inline-SVG zu erhalten, musste ich Folgendes tun:

Anstelle des Dateiladers verwenden Sie svg-inline-loader als Ihren SVG-Lader:

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

Dann laden Sie die SVG-Inline in eine Komponente:

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

Es sieht so aus, als gäbe es einen Inline-SVG-Wrapper für react svg-inline-react , der eine andere Option anstelle von <div dangerouslySetInnerHTML={{__html: mySvg}} /> Wäre.

25
svnm

Alte Frage, aber ich habe diese Lösung nirgendwo gesehen, also habe ich beschlossen, sie zu posten, in der Hoffnung, dass sie jemandem hilft.

Wenn Sie diese SVG-Symbole formatieren möchten, möchten Sie sie möglicherweise mit dem Raw Loader laden:

webpack.config.js:

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

Der Import aus meiner Sicht:

import closeIcon from 'svg/ic_close_black_24px.svg'; 

Die Vorlage (Moustache verwendet 3 Klammern, um die SVG-Daten (URL) unverschlüsselt einzufügen):

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

auf diese Weise werden die SVG-Daten anstelle der Klammern eingefügt und sehen folgendermaßen aus:

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

Ich verwende Backbone mit Mustache Template Engine mit Webpack 2.5.1

16
jsaddwater

Ich hoffe, dass meine späte Antwort für jemanden weiterhin nützlich ist, da mir keine der oben genannten Optionen gefällt.

Mit dem Webpack-Loader react-svg-loader können Sie SVG-Symbole wie JSX-Komponenten importieren:

import Logo from './logo.svg';

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

und minimale Konfiguration sieht so aus:

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

Das Beste daran ist, dass es nur den Inhalt der SVG-Datei ausgibt, ohne zusätzliche Wrapper und dangerouslySetInnerHTML in Ihrem Code.

15
Stas Gavrylov

Wenn ich mich nicht irre, da Sie den Dateilader verwenden, können Sie ihn auf die gleiche Weise wie alle anderen Anforderungen verwenden. Das Webpack verwandelt require("./logo.svg") in einen Pfad zu einer Datei, die beim Bündeln ausgegeben wird.

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

Ähnlich wie bei einer anderen Antwort mit React gibt es auch ein praktisches Vue Plugin.

vue-svg-loader einfach in deine Konfiguration werfen und loslegen. Das Schöne ist, es wird auch Ihre SVG durch SVGO ausführen, um es zu optimieren.

Konfiguration

{
    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}
      ]
    }
  }
}

Verwendung

<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

Hier ist eine einfache nicht reagierende Lösung.

  1. Installieren Sie Svg Inline Loader
  2. Fügen Sie in webpack.config.js { test: /\.svg$/, loader: 'svg-inline-loader' } Hinzu
  3. Importieren Sie in Ihrer js-Datei das SVG-Bild und fügen Sie es wie folgt einem DOM-Element hinzu
  import Svg from './svg.svg';

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

    element.innerHTML = Svg;

    return element;
  }

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