SVG loader for Elm

A webpack loader that inlines external SVG file into Elm views. It consists of a elm package and a npm package. DEMO.

Inspired by elm-css-modules-loader.

Overview

module Main exposing (..)

import Svg.Attributes
import InlineSvg exposing (inline)

{ icon } =
    inline
        { github = "./svg/github.svg"
        , share = "./svg/share.svg"
        }

view =
    div
        []
        [ icon .github [ Svg.Attributes.class "icon icon--github" ]
        , icon .share [ Svg.Attributes.class "icon icon--share" ]
        ]

Setup

Add elm-svg-loader and raw-loader to your project.

npm install raw-loader elm-svg-loader --save-dev

or

yarn install raw-loader elm-svg-loader --dev

Webpack config

module.exports = {
  ⋮
  module: {
    rules: [
      {
        test: /\.elm$/,
        use: [
          {
            loader: "elm-svg-loader",
          },
          {
            loader: "elm-webpack",
          }
        ],
      },
      {
        test: /\.svg$/,
        loaders: ["raw-loader"]
      }
      ⋮
    ],
  },
};

Elm package

elm-package install rnons/elm-svg-loader

Then you can import InlineSvg as in the Overview section.

Under the hood

1. Without elm-svg-loader, webpack will compile

   { icon } =
       inline
           { github = "./svg/github.svg"
           , share = "./svg/share.svg"
           }
   

   to

   var _user$project$Main$_p0 = _rnons$elm_svg_loader$InlineSvg$inline(
     {github: './svg/mark-github.svg', share: './svg/share.svg'});
   

2. elm-svg-loader will replace the svg file location with a require statement

   var _user$project$Main$_p0 = _rnons$elm_svg_loader$InlineSvg$inline(
     {github: require('./svg/mark-github.svg'), share: require('./svg/share.svg')});
   

3. With the help of raw-loader, require('./svg/mark-github.svg') will become the actual svg file content.

4. With the help of elm-svg-parser, the icon function in icon .github [] parses the svg file content String to a Html msg so that it can be used in Elm views.