Dołączanie SVG do DOM za pomocą pakietu Web Pack

Question

Obecnie moja firma zawiera dość duży sprite SVG zawierający różne ikony w index.html naszej aplikacji internetowej AngularJS. Głównym SVG jest ukryty przez CSS i wyświetlamy poszczególne ikony z SVG wybierając je przez ich identyfikatory:

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

Jesteśmy teraz stara się zmniejszyć czas ładowania naszej strony przez dzielenie się z SVG i inline otrzymaną części na stronach, które ich potrzebują. Ponieważ przenosimy się również do pakietu Webpack, aby łączyć naszą aplikację, chcielibyśmy określić zależności dla konkretnego pliku SVG w module Angular, a następnie umieścić w pakiecie Webpack zawartość SVG - ewentualnie opakowaną w div - w DOM . Czy można to osiągnąć za pomocą istniejącego programu ładującego? Znalazłem program ładujący, który zasadniczo eksportuje zawartość naszego SVG. Jednak nie wiem, jak połączyć go z innym programem ładującym, który wstawiłby się do DOM, tak jak to robi program ładujący.

Każda pomoc jest bardzo doceniana.

Felix

Answer 1

Inną opcją wyszła ponieważ padło pytanie: https://github.com/kisenka/svg-sprite-loader

To jak style-ładowarki ale dla SVG:

• Tworzy pojedynczy SVG ikonki z zestaw obrazów.
• Obsługa obrazów rastrowych (PNG, JPG i GIF).
• Niestandardowa obsługa implementacji ikonek.

React przykłady są, i tam jest opcja config dla kątowa:

• angularBaseWorkaround Dodaje obejście problemu z połączeniem i History API, które jest typowe dla angularjs.

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

<Icon glyph={help} /> 

Answer 2

skończyło się pisać własne ładowarka WebPACK tego problemu. Możesz zainstalować wbudowany moduł ładujący poprzez npm. Więcej informacji można znaleźć na stronie https://www.npmjs.com/package/inline-loader

Answer 3

Ponadto można użyć: https://github.com/mrsum/webpack-svgstore-plugin dla tego

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