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: <svg xmlns=" width="26" height="26" viewBox="0 0 26 26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
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