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
alert-octagon
alert-triangle
align-center
align-justify
align-right
arrow-down-circle
arrow-down-left
arrow-down-right
arrow-left-circle
arrow-right-circle
arrow-right
arrow-up-circle
arrow-up-left
arrow-up-right
battery-charging
check-circle
check-square
chevron-down
chevron-left
chevron-right
chevrons-down
chevrons-left
chevrons-right
chevrons-up
cloud-drizzle
cloud-lightning
corner-down-left
corner-down-right
corner-left-down
corner-left-up
corner-right-down
corner-right-up
corner-up-left
corner-up-right
credit-card
dollar-sign
download-cloud
external-link
fast-forward
folder-minus
folder-plus
git-pull-request
headphones
help-circle
message-circle
message-square
minus-circle
minus-square
more-horizontal
more-vertical
pause-circle
phone-forwarded
phone-incoming
phone-missed
phone-outgoing
play-circle
plus-circle
plus-square
refresh-ccw
shopping-bag
shopping-cart
skip-forward
smartphone
stop-circle
thermometer
thumbs-down
toggle-left
toggle-right
trending-down
trending-up
upload-cloud
Opaque type representing icon builder