Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pinata-llc/svg2elm
Generates Elm modules out of SVG files
https://github.com/pinata-llc/svg2elm
convert elm generate icons inline-svg svg svg-to-elm svg2elm
Last synced: 19 days ago
JSON representation
Generates Elm modules out of SVG files
- Host: GitHub
- URL: https://github.com/pinata-llc/svg2elm
- Owner: pinata-llc
- License: bsd-3-clause
- Created: 2020-01-13T19:21:33.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-15T11:13:16.000Z (7 months ago)
- Last Synced: 2024-11-22T18:58:50.344Z (about 1 month ago)
- Topics: convert, elm, generate, icons, inline-svg, svg, svg-to-elm, svg2elm
- Language: Elm
- Homepage: https://pinata-llc.github.io/svg2elm/
- Size: 309 KB
- Stars: 18
- Watchers: 8
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svg2elm
[](https://www.npmjs.com/package/svg2elm) [](LICENSE)
Generates Elm modules out of SVG files. Comes with a [CLI tool](#installation) and a [JavaScript API](#api) to build bundler plugins.
Using Parcel? Check out [parcel-plugin-elm-svg](https://github.com/pinata-llc/parcel-plugin-elm-svg).
## Installation
You can install `svg2elm` from npm:
```console
$ npm install -g svg2elm
```
## How to use
Let's say we have a chevron icon that we want to embed in our Elm app:
```console
$ cat chevron.svg
```
```html
```
Using `svg2elm` we can generate an Elm module out of it. Let's call ours `Acme.Icons`:
```console
$ svg2elm --module Acme.Icons chevron.svg > Acme/Icons.elm
```
```elm
module Acme.Icons exposing (..)
import Svg
import VirtualDom exposing (Attribute, attribute)
chevron : List (Attribute msg) -> Svg.Svg msg
chevron attrs = Svg.node "svg" ([attribute "xmlns" "http://www.w3.org/2000/svg", attribute "viewBox" "0 0 100 100"] ++ attrs) [ Svg.node "line" ([attribute "x1" "1", attribute "y1" "1", attribute "x2" "50", attribute "y2" "50", attribute "stroke-linecap" "round"]) [], Svg.node "line" ([attribute "x1" "50", attribute "y1" "50", attribute "x2" "1", attribute "y2" "99", attribute "stroke-linecap" "round"]) []]
```
We are now ready to embed the icon in our app! Since the generated function returns an [Svg](https://package.elm-lang.org/packages/elm/svg/latest/Svg#Svg) node, we can use it like any other element:
```elm
import Acme.Icons exposing (chevron)
...
nextPage =
button []
[ text "Next Page"
, chevron []
]
```
## SVG Attributes
Note that the generated function takes a [List](https://package.elm-lang.org/packages/elm/core/latest/List) of [Attributes](https://package.elm-lang.org/packages/elm/virtual-dom/latest/VirtualDom#Attribute):
```elm
chevron : List (Attribute msg) -> Svg.Svg msg
```
This allows us to tweak our icons in a per usage basis. For example, if we wanted to point our chevron to the left, we could do the following:
```elm
previousPage =
button []
[ text "Previous Page"
, chevron [ transform "rotate(180)" ]
]
```
Similarly, we could change the size, colors, stroke width, etc.
```elm
...
, chevron [ width "30", stroke "blue", strokeWidth "2" ]
...
```
Attributes are appended to the top SVG node. This means that you can only override those set at that level. This is usually not a problem since child nodes inherit parent attributes. However, you might have to tweak your SVG to fit your needs.
## Multiple icons per module
You likely want to generate a module with all your app icons. You can do this by passing multiple files to `svg2elm`:
```console
$ svg2elm --module Acme.Icons icons/chevron.svg icons/user.svg
```
...or you can use globs:
```console
$ svg2elm --module Acme.Icons icons/*.svg
```
A function will be generated for each SVG file.
## Elm UI
If you're using the _awesome_ [mdgriffith/elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/), you have to use [Element.html](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#html) to turn your [Svg](https://package.elm-lang.org/packages/elm/svg/latest/Svg#Svg) node into an [Element](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#Element).
```elm
nextPage =
button []
[ text "Next Page"
, chevron [] |> html
]
```
## API
This package also exposes a JavaScript API that can be used to fit `svg2elm` into any build process.
It's just three functions: [reference](https://pinata-llc.github.io/svg2elm/modules/_svg2elm_.html).
## Inspiration
At [PINATA](https://www.gopinata.com), we have been using [SVGR](https://github.com/gregberge/svgr) for years to load our icons as React components. This project aims to bring the same experience to the world of Elm.
## License
BSD-3-Clause. See [LICENSE](LICENSE) file.
## Humans
Thanks to [rnons](https://github.com/rnons) for building [elm-svg-parser](https://package.elm-lang.org/packages/rnons/elm-svg-parser/latest/) and [Garados007](https://github.com/Garados007) for making it work with Elm 0.19.
Built by [Piotr Brzeziński](https://github.com/brzezinskip) and [Agustín Zubiaga](https://github.com/aguzubiaga) at [PINATA.](https://www.gopinata.com)
♥︎