This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0 1.0.1
inline SVG document inside Elm views
version 1.0.0
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.2
Committed At 2017-12-16 11:20:12 UTC
rnons/elm-svg-parser 1.0.0 <= v < 2.0.0 1.2.1
elm-lang/svg 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

Modules

README

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.