Anfügen eines SVG an das DOM mit Webpack

Question

Derzeit enthält meine Firma ein ziemlich großes SVG-Sprite mit verschiedenen Symbolen in der index.html unserer AngularJS Web App. Der Haupt SVG wird von CSS versteckt und wir zeigen einzelne Symbole aus der SVG, indem sie durch ihre IDs Auswahl:

<svg> 
    <use xlink:href="#icon-id"></use> 
</svg> 

Wir versuchen nun, die Ladezeit unserer Seite zu reduzieren, indem die SVG-Aufspaltung und inlining der resultierenden Teile auf Seiten, die sie brauchen. Da wir auch zu Webpack wechseln, um unsere App zu bündeln, möchten wir Abhängigkeiten für eine bestimmte SVG-Datei in einem Angular-Modul angeben und dann Webpack den Inhalt des SVG - möglicherweise in ein div - in das DOM einfügen lassen . Gibt es eine Möglichkeit, dies mit einem vorhandenen Lader zu erreichen? Ich habe den Raw-Loader gefunden, der im Grunde den Inhalt unserer SVG exportiert. Ich weiß jedoch nicht, wie man es mit einem anderen Loader kettet, der in das DOM eingefügt wird, wie es der Style-Loader tut.

Jede Hilfe wird sehr geschätzt.

Felix

Answer 1

zu finden ist ausgezogen, da diese Frage gestellt wurde: https://github.com/kisenka/svg-sprite-loader

Es ist wie Stil-loader aber für SVG:

• Erzeugt einen einzelnen SVG Sprit aus eine Reihe von Bildern.
• Unterstützung von Rasterbildern (PNG, JPG und GIF).
• Benutzerdefinierte Sprite-Implementierung unterstützt.

Reagieren Beispiele vorgesehen sind, und es gibt eine Konfigurationsoption für Winkel:

• angularBaseWorkaround Fügt Abhilfe für Problem mit Kombination und History-API, die für Angularjs typisch ist.

// some-component.jsx 
import Icon from './icon'; 
import help from './images/icons/Help.svg'; 

<Icon glyph={help} /> 

Answer 2

Ich landete mein eigenes webpack loader für dieses Problem bis zu schreiben. Sie können den Inline-Loader über npm installieren. Weitere Daten können weitere Option bei https://www.npmjs.com/package/inline-loader

Answer 3

Auch können Sie verwenden: https://github.com/mrsum/webpack-svgstore-plugin für die

npm i webpack-svgstore-plugin --save-dev