Awesome

svgen

Generate an icons module in purescript halogen from svg files.

Usage

yarn add --dev @nonbili/svgen
yarn svgen -h

Pass a --svgo-config if you want to preprocess your svg files with svgo.

Example

node index.js  -F example/svg -o example/src/Icons.purs --svgo-config example/svgo.config.js
cd example
yarn
pulp build
yarn start

The generated Icons.purs will be like

module Icons where

import Prelude ((<>))
import Halogen.HTML

ns :: Namespace
ns = Namespace "http://www.w3.org/2000/svg"

iconHeart :: forall p r i. Array (IProp r i) -> HTML p i
iconHeart attrs =
  elementNS ns (ElemName "svg")
  ( [ attr (AttrName "width") "16"
  , attr (AttrName "height") "16"
  , attr (AttrName "viewBox") "0 0 16 16"
  ] <> attrs)
  [ elementNS ns (ElemName "path")
    [ attr (AttrName "d") "M11.252 11.422C13.912 9.426 15 7.96 15 6c0-2.283-1.18-4-3.5-4a1.63 1.63 0 0 0-.569.136c-.347.14-.743.373-1.155.673a10.275 10.275 0 0 0-1.069.898L8 4.414l-.707-.707a10.275 10.275 0 0 0-1.069-.898c-.412-.3-.808-.533-1.155-.673A1.623 1.623 0 0 0 4.5 2C2.18 2 1 3.717 1 6c0 1.959 1.087 3.426 3.748 5.422.436.327 2.206 1.582 3.252 2.339 1.046-.757 2.816-2.012 3.252-2.339zM8 3s2-2 3.5-2C15 1 16 4 16 6c0 4-4 6-8 9-4-3-8-5-8-9 0-2 1-5 4.5-5C6 1 8 3 8 3z"
    ]
    [
    ]
  ]

Then use it like

import Icons (iconHeart)

className = HH.attr (HH.AttrName "class")

render state =
  HH.div_
  [ iconHeart
    [ className "icon" ]
  ]