Geek Answers Handbook

Joining SVG to the DOM with Webpack

My company currently includes a fairly large SVG sprite containing various icons in the index.html of our AngularJS web application. The main SVG is hidden by CSS, and we show the individual icons from the SVG, selecting them by their identifiers:

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

Now we are trying to reduce the loading time of our site by dividing the SVG and introducing the resulting parts into the pages that they need. Since we also go to Webpack to link our application, we want to specify the dependencies for a specific SVG file in the Angular module, and then Webpack to insert the contents of the SVG - possibly wrapped in a DOM div-in. Is there a way to achieve this using an existing bootloader? I found a raw-loader that basically exports the contents of our SVG. However, I do not know how to associate it with another loader that will be inserted into the DOM, for example, say, a style loader.

Any help is greatly appreciated.

Felix

+5
source share
3 answers

Another option appeared after this question was asked: https://github.com/kisenka/svg-sprite-loader

This is like a bootloader style, but for SVG:

  • Creates one SVG sprite from a set of images.
  • Support for bitmap images (PNG, JPG and GIF).
  • Support for custom sprites.

Reagent examples are provided, but for angular there is a configuration option:

  • angularBaseWorkaround Adds a workaround for the combination problem and history API, which is typical of Angular.js.
 // some-component.jsx import Icon from './icon'; import help from './images/icons/Help.svg'; <Icon glyph={help} />
+1
source

I ended up writing my own web package downloader for this problem. You can install the built-in bootloader via npm. More information can be found at https://www.npmjs.com/package/inline-loader

+1
source

You can also use: https://github.com/mrsum/webpack-svgstore-plugin for this

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

More articles:


All Articles