https://github.com/rnons/purescript-svg-parser-halogen

A library to inline SVG source string into halogen views
https://github.com/rnons/purescript-svg-parser-halogen

halogen purescript svg

Last synced: about 1 month ago
JSON representation

A library to inline SVG source string into halogen views

• Host: GitHub
• URL: https://github.com/rnons/purescript-svg-parser-halogen
• Owner: rnons
• License: bsd-3-clause
• Created: 2017-12-17T08:45:43.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-05-30T07:58:36.000Z (over 2 years ago)
• Last Synced: 2024-11-11T07:52:38.378Z (about 1 month ago)
• Topics: halogen, purescript, svg
• Language: PureScript
• Homepage: https://rnons.github.io/purescript-svg-parser-halogen
• Size: 337 KB
• Stars: 10
• Watchers: 4
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# purescript-svg-parser-halogen



  

  



A library to inline SVG source string into halogen views.

You might be interested in [svgen](https://github.com/nonbili/svgen), a CLI tool to generate an icons module from svg files.

See [Demo](https://rnons.github.io/purescript-svg-parser-halogen) for an example.

## How to use

```purescript

import Svg.Renderer.Halogen (icon)

-- | You can use FFI and webpack raw-loader to load external SVG files

code :: String

code = """"""

type Icon = forall p r i. Array (IProp r i) -> HTML p i

iconCode :: Icon

iconCode = icon code

```

It's as simple as this, in most cases you only need the `icon` function. You can then use `iconCode` in your `render` function, you can also apply additional className to it.

`Halogen.HTML.Properties.class_` won't work though, you need to use `Halogen.HTML.attr`.

```purescript

import Halogen.HTML as HH

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

render state =

  iconCode [ className "icon" ]

```