Collegamento di un SVG al DOM con Webpack

Question

Attualmente la mia azienda include uno sprite SVG piuttosto grande contenente varie icone nell'index.html della nostra app Web AngularJS. Lo SVG principale è nascosto da CSS e visualizzare le singole icone dal SVG selezionandoli dal loro ID:

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

Ora stiamo cercando di ridurre il tempo di caricamento del nostro sito suddividendo l'SVG e inlining la conseguente parti su pagine che ne hanno bisogno. Dal momento che ci stiamo spostando anche su Webpack per raggruppare la nostra app, vorremmo specificare le dipendenze per uno specifico file SVG in un modulo Angular e poi fare in modo che Webpack inserisca il contenuto dell'SVG - possibilmente racchiuso in un div - nel DOM . C'è un modo per ottenere questo con un caricatore esistente? Ho trovato il caricatore grezzo che sostanzialmente esporta il contenuto del nostro SVG. Tuttavia, non so come concatenarlo con un altro caricatore che si inserirà nel DOM come direbbe lo style-loader.

Qualsiasi aiuto è molto apprezzato.

Felix

Answer 1

Un'altra opzione è uscito dal questa domanda è stato chiesto: https://github.com/kisenka/svg-sprite-loader

E 'come stile-loader, ma per SVG:

• crea un singolo sprite SVG da un insieme di immagini.
• Supporto immagini raster (PNG, JPG e GIF).
• Supporto di implementazione di sprite personalizzato.

React esempi vengono forniti, e c'è un'opzione di configurazione per angolare:

• angularBaseWorkaround Aggiunge Soluzione di problema con la combinazione di storia e API che è tipico per Angular.js.

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

<Icon glyph={help} /> 

Answer 2

ho finito per scrivere il mio webpack caricatore per questo problema. È possibile installare il caricatore in linea tramite npm. Maggiori informazioni sono disponibili all'indirizzo https://www.npmjs.com/package/inline-loader

Answer 3

Inoltre è possibile utilizzare: https://github.com/mrsum/webpack-svgstore-plugin per quella

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