Unavailable. Nobody can download this version any more, with elm or with the Lamdera compiler: github.com/not1602/elm-feather is gone (deleted or private); Software Heritage not asked yet (this run's --swh-calls were used up); no fork with tag 1.0.0 found (7 same-name repos checked); no cached copy. Use another version.
Using a feather icon in your view is as easy as:
featherIcon : Html msg
featherIcon =
FeatherIcons.feather
|> FeatherIcons.toHtml []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.
Build icon, ready to use in html. It accepts list of svg attributes, for example in case if you want to add an event handler.
-- default
Icon.download
|> Icon.toHtml []
-- with some attributes
Icon.download
|> Icon.withSize 10
|> Icon.withClass "icon-download"
|> Icon.toHtml [ onClick Download ]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.
Overwrite class attribute of an icon
Icon.download
|> Icon.withClass "icon-download"
|> Icon.toHtml []Set size attribute of an icon
Icon.download
|> Icon.withSize 10
|> Icon.toHtml []Set unit of size attribute of an icon, one of: "em", "ex", "px", "in", "cm", "mm", "pt", "pc", "%"
Icon.download
|> Icon.withSize 50
|> Icon.withSizeUnit "%"
|> Icon.toHtml []Set thickness of icon lines, useful when inlining icons with bold / normal text.
Icon.playCircle
|> Icon.withStrokeWidth 1
|> Icon.toHtml []If you'd like to use same API while creating personally designed icons, you can use the customIcon function. You have to provide it with a List (Svg Never) that will be embedded into the icon.
Build custom svg icon
[ Svg.line [ x1 "21", y1 "10", x2 "3", y2 "10" ] []
, Svg.line [ x1 "21", y1 "6", x2 "3", y2 "6" ] []
, Svg.line [ x1 "21", y1 "14", x2 "3", y2 "14" ] []
, Svg.line [ x1 "21", y1 "18", x2 "3", y2 "18" ] []
]
|> customIcon
|> withSize 26
|> withViewBox "0 0 26 26"
|> toHtml []Example output:
Set viewBox attribute for a custom icon
Icon.custom [ customSvgPathFittingWithin100pxSquare ]
|> Icon.withViewBox "0 0 100 100"
|> Icon.toHtml []alert-circle image
alert-octagon image
alert-triangle image
align-center image
align-justify image
align-right image
arrow-down-circle image
arrow-down-left image
arrow-down-right image
arrow-left-circle image
arrow-right-circle image
arrow-right image
arrow-up-circle image
arrow-up-left image
arrow-up-right image
battery-charging image
check-circle image
check-square image
chevron-down image
chevron-left image
chevron-right image
chevrons-down image
chevrons-left image
chevrons-right image
chevrons-up image
cloud-drizzle image
cloud-lightning image
corner-down-left image
corner-down-right image
corner-left-down image
corner-left-up image
corner-right-down image
corner-right-up image
corner-up-left image
corner-up-right image
credit-card image
dollar-sign image
download-cloud image
external-link image
fast-forward image
folder-minus image
folder-plus image
git-pull-request image
headphones image
help-circle image
message-circle image
message-square image
minus-circle image
minus-square image
more-horizontal image
more-vertical image
pause-circle image
phone-forwarded image
phone-incoming image
phone-missed image
phone-outgoing image
play-circle image
plus-circle image
plus-square image
refresh-ccw image
shopping-bag image
shopping-cart image
skip-forward image
smartphone image
stop-circle image
thermometer image
thumbs-down image
toggle-left image
toggle-right image
trending-down image
trending-up image
upload-cloud image
Opaque type representing icon builder