Using SVG sprites in elm with webpack

SVG sprites is the new way to use icons in web app. Actually it is not “that new”, but support now in 2017 is quite good.

It is actually quite easy to use them from elm.

First, you need some webpack magick, install the svg-sprint-loader loader.

Then somewhere inside your javascript app, for example where you require your Main elm file, add this:

This code iterates on the .svg files within assets/icons and required them all. You can customize it to your need.

Then, you can use them from elm with something like this:

This code is straightforward, it uses <svg use"#iconname" /> to show the SVG icon. The iconToString function returns the name of the icon (which is the filename required in webpack).