Skip to content
A webpack loader that inlines external SVG file into Elm views
Elm JavaScript HTML
Branch: master
Clone or download
Pull request Compare This branch is even with rnons:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.gitignore
LICENSE
README.md
elm-package.json
index.js
package.json

README.md

SVG loader for Elm

NOTE: This repo is not maintained any more. Feel free to fork and upload to elm-packages by yourself.

npm Elm package

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 add 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.

You can’t perform that action at this time.