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
require('./index.html') var req = require.context("assets/icons", true, /\.svg$/) req.keys().forEach(req) var Elm = require('./src/Main.elm')
This code iterates on the
.svg files within
and required them all. You can customize it to your need.
Then, you can use them from elm with something like this:
import Html exposing (Html, text, a, i, div, br) import Html.Attributes exposing (class, value, href) import Html exposing (Attribute) import Json.Decode as Json import Svg import Svg.Attributes as SvgAttr import Style.Icon as Style import Html.CssHelpers import Css.Helpers import Style.Constants as Constants type Icon = BrokenHeart | Heart | Logo icon : Icon -> Html msg icon icon = Svg.svg [ SvgAttr.class "icon" ] [ Svg.use [ SvgAttr.xlinkHref ("#" ++ (iconToString icon)) ]  ] iconToString : Icon -> String iconToString icon = case icon of BrokenHeart -> "brokenHeart" Heart -> "heart" Logo -> "logo"
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).