API suggestion: expose `List Svg` icons instead of `Html` ones

[mpizenberg]

In order to test some layout, I've been using few feather icons. In my tests, I needed to have better control of the icons attributes, namely:

• remove the class attribute
• scalable width and height attributes

I kept the stroke "currentColor" attribute even if some my want to have a better control of this also. Thanks to your other tool elm-feather-icons, I've generated the icons I was interested in and modified the API by exposing the List Svg and helper functions as follows:

sized : Float -> List (Svg msg) -> Html msg
sized size =
    svg (width (toString size) :: height (toString size) :: defaultAttributes)

defaultAttributes : List (Svg.Attribute msg)
defaultAttributes =
    [ fill "none"
    , stroke "currentColor"
    , strokeLinecap "round"
    , strokeLinejoin "round"
    , strokeWidth "2"
    , viewBox "0 0 24 24"
    ]

download : List (Svg msg)
download =
    [ Svg.path [ d "M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3" ] []
    , Svg.polyline [ points "8 12 12 16 16 12" ] []
    , Svg.line [ x1 "12", y1 "2", x2 "12", y2 "16" ] []
    ]

...

This is just an example way of giving control back to user. There might be better options than what I propose here.

[1602]

Yep, this API looks good to me. I'll just outline all use-cases after change:

Resize icon:

Icon.download
    |> Icon.sized 16

Default attributes:

Icon.download
    |> Svg.svg Icon.defaultAttributes

Let's think a bit, and go with this if there's no other ideas.

[mpizenberg]

Yes that is indeed the way I use it. It may be good to ask others of your known users what they think about it since it is a breaking API change.

[mpizenberg]

In particular, it is a bit cumbersome if you need to add classes and change size like:

Icon.download
    |> svg (class "feather-download" :: width ... :: height ... :: Icon.defaultAttributes)

[1602]

I find HttpBuilder-like API very nice, e.g. using withX and toY methods, e.g.:

-- default
Icon.download
    |> Icon.toHtml []

-- sized 10
Icon.download
    |> Icon.withSize 10
    |> Icon.toHtml []

-- with custom class
Icon.download
    |> Icon.withClass "icon-download"
    |> Icon.toHtml []

-- with combination of things
Icon.download
    |> Icon.withSize 10
    |> Icon.withClass "icon-download"
    |> Icon.toHtml [ onClick Download ]

[1602]

@mpizenberg fancy a review? https://github.com/1602/elm-feather/pull/4

[mpizenberg]

done :)