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 []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 2.1
|> withSizeUnit "em"
|> toHtml []Example output:
activity
airplay
alert-circle
alert-octagon
alert-triangle
align-center
align-justify
align-left
align-right
anchor
aperture
arrow-down-left
arrow-down-right
arrow-down
arrow-left
arrow-right
arrow-up-left
arrow-up-right
arrow-up
at-sign
award
bar-chart-2
bar-chart
battery-charging
battery
bell-off
bell
bluetooth
bold
book
bookmark
box
briefcase
calendar
camera-off
camera
cast
check-circle
check-square
check
chevron-down
chevron-left
chevron-right
chevron-up
chevrons-down
chevrons-left
chevrons-right
chevrons-up
chrome
circle
clipboard
clock
cloud-drizzle
cloud-lightning
cloud-off
cloud-rain
cloud-snow
cloud
codepen
command
compass
copy
corner-down-left
corner-down-right
corner-left-down
corner-left-up
corner-right-down
corner-right-up
corner-up-left
corner-up-right
cpu
credit-card
crop
crosshair
delete
disc
download-cloud
download
droplet
edit-2
edit-3
edit
external-link
eye-off
eye
fast-forward
feather
file-minus
file-plus
file-text
file
film
filter
flag
folder
github
gitlab
globe
grid
hash
headphones
heart
help-circle
home
image
inbox
info
italic
layers
layout
life-buoy
link-2
link
list
loader
lock
log-in
log-out
map-pin
map
maximize-2
maximize
message-circle
message-square
mic-off
mic
minimize-2
minimize
minus-circle
minus-square
minus
monitor
moon
more-horizontal
more-vertical
move
music
octagon
package
paperclip
pause-circle
pause
percent
phone-call
phone-forwarded
phone-incoming
phone-missed
phone-off
phone-outgoing
phone
pie-chart
play-circle
play
plus-circle
plus-square
plus
power
printer
radio
refresh-ccw
refresh-cw
repeat
rewind
rotate-ccw
rotate-cw
save
scissors
search
server
settings
shield
shopping-cart
shuffle
sidebar
skip-back
skip-forward
slack
slash
sliders
smartphone
speaker
square
star
stop-circle
sun
sunrise
sunset
tablet
tag
target
thermometer
thumbs-down
thumbs-up
toggle-left
toggle-right
trash-2
trash
trending-down
trending-up
triangle
tv
type
umbrella
underline
unlock
upload-cloud
upload
user-check
user-minus
user-plus
user-x
user
users
video-off
video
voicemail
volume-1
volume-2
volume-x
volume
watch
wifi-off
wifi
wind
x-circle
x-square
x
zap
zoom-in
zoom-out
Opaque type representing icon builder