Configurable icons

[1602]

New API to configure icon attributes, as discussed in #3

This code change is generated, here's the change in code generator: https://github.com/1602/elm-feather-icons/pull/3/files

[mpizenberg]

I like the new type IconBuilder being the key component. I have few remarks though that I will organize in two points: "general case" and "my use case" since my specific use case might differ from others.

1. General case

You should expose this type (without it's constructor, as an "opaque" type) so that users of the lib can add type annotations to their own functions.

Also I think I would go all-in with the "withX" pattern, it adds consistency. Specifically, I would do something like:

type IconBuilder msg
    = IconBuilder
        { size : Int
        , class : String
        , icon : List (Svg msg)
        }

withSize : Int -> IconBuilder msg -> IconBuilder msg

withClass : String -> IconBuilder msg -> IconBuilder msg

withIcon : List (Svg msg) -> IconBuilder msg -> IconBuilder msg

2. My use case

You can find my example use case online here [1] with code here [2].

Since I'm doing a responsive + fluid layout, the icons are sized with float numbers. So I would need to have size be a Float rather than an Int.

Also, this project based on mdgriffith/style-elements [3] for the styling so I do not need to add a class to icons. I would then have the class icon builder attribute being a Maybe String and adapt toHtml accordingly.

Finally, as you can see, I'm extending feather icons with some of my owns, but keeping the feather style. For this, it would be awesome to have a build or similar function exposed like below. It would enable me to use my own svg icons with the same feather style.

build : Float -> Maybe String -> List (Svg msg) -> IconBuilder msg

[1] (WIP demo) http://elm-image-annotation.pizenberg.fr/ [2] (WIP code) https://github.com/mpizenberg/demo-elm-image-annotation/blob/master/src/Icons.elm [3] (style-elements) https://github.com/mdgriffith/style-elements

[1602]

Thank you for your comments, I've implemented some version of api that should be compatible with your usecase (using customIcon method).

[1602]

@mpizenberg also, if you could help with correcting the docs (I'm not a native language user, still struggling with it), it would be great.

[mpizenberg]

Thanks! neither am I ^^ (native speaker) but I'll have a look. Could you attach here the file generated by command elm-make --docs=documentation.json? it will help to have an overview of how everything fit together.

[1602]

@mpizenberg here's it: https://pastebin.com/raw/wNLiSpgc (sorry, GH didn't allow attaching json files). Thank you!

[mpizenberg]

This API definitely solve all my personal needs, thanks for that! I still have few questions though ^^. The type IconBuilder msg feels a little intimidating, especially knowing that it is what all icon functions return. You could also enforce all internal svg to be of type Svg Never (they cannot have events attached, but that's ok since we can still attach events to the svg container element). Based on this, it could simply be for example Icon (no msg). After all, it is an internal representation of an icon.

Regarding the documentation, I think it should start by something more straightforward. People are interested by feather icons after all. Others like me needing personalization can afford reading a little more. What do you think of an organization of the doc similar to:

Basic Usage

Using a feather icon in your view is as easy as:

featherIcon : Html msg
featherIcon =
    FeatherIcons.toHtml [] FeatherIcons.feather

Change FeatherIcons.feather by the icon you prefer, A list of all icons is visible here: https://1602.github.io/elm-feather-icons/

All icons of this package are provided as the internal type Icon. To turn them into an Html msg, simply use the toHtml function.

@docs Icon, toHtml

Customize Icons

Feather icons are 24px size by default, and come with two css classes, feather and feather-"icon-name". For the aperture icon for example, this will be: feather feather-aperture.

To customize it's class and size attributes simply use the withClass and withSize functions before turning them into Html with toHtml.

@docs withClass, withSize, withSizeUnit

New Custom Icons

If you'd like to keep the "feather" style while creating personally designed icons, you can use the customIcon function. You have to provide it with a List (Svg Never) that will be embeded into the icon.

@docs customIcon

Feather Icons List

@docs activity, airplay, ...

[1602]

Thanks @mpizenberg good points regarding docs and Svg Never (never used Never before), will amend, hopefully tonight.

[mpizenberg]

Oh by the way, for the documentation thing, you don't have to call it .json. elm-make --docs=doc.txt would work the same and would be fine with github upload ;)