UI.Icon
is an implementation of icons using an SVG-spritesheet.
To use these icons, first, you must insert the spritesheet once (and only once) in the layout.
The sprite sheet injection uses a custom Html
component that later populates using a parcel's import.
See Icon.svgSpriteImport
to know what to do on the Elm's side.
Parcel's instructions are in README.
NOTE: The spritesheet is automatically injected when using UI.Document.toBrowserDocument
An icon can be created and rendered as in the following pipeline:
Icon.logout "Logout from this account"
|> Icon.renderElement renderConfig
svgSpriteImport : Html msg
Imports the SVG-spritesheet with all icons into the rendered HTML.
There is no need for using this function when you're using UI.Document
, and you should be using it.
But, in case you aren't, you need to insert this function on the most top component, which probably is the Element.layout
, like this:
main : Program Flags Model Msg
main =
{ yourProgram
| view =
{ title = yourPageTitle
, body =
[ Icon.svgSpriteImport
, Element.layout someAttributes yourPageView
]
}
}
NOTE: Use UI.Document
!
The Icon
type is used for describing the component for later rendering.
addCircle : String -> Icon
Icon constructor.
Icon.addCircle "Accessibility hint"
add : String -> Icon
Icon constructor.
Icon.add "Accessibility hint"
arrowCurveLeft : String -> Icon
Icon constructor.
Icon.arrowCurveLeft "Accessibility hint"
arrowDown : String -> Icon
Icon constructor.
Icon.arrowDown "Accessibility hint"
arrowDownBold : String -> Icon
Icon constructor.
Icon.arrowDownBold "Accessibility hint"
arrowLeft : String -> Icon
Icon constructor.
Icon.arrowLeft "Accessibility hint"
arrowRight : String -> Icon
Icon constructor.
Icon.arrowRight "Accessibility hint"
arrowShapeUp : String -> Icon
Icon constructor.
Icon.arrowShapeUp "Accessibility hint"
arrowUp : String -> Icon
Icon constructor.
Icon.arrowUp "Accessibility hint"
arrowUpBoldNegative : String -> Icon
Icon constructor.
Icon.arrowUpBoldNegative "Accessibility hint"
bell : String -> Icon
Icon constructor.
Icon.bell "Accessibility hint"
bicycle : String -> Icon
Icon constructor.
Icon.bicycle "Accessibility hint"
bike : String -> Icon
Icon constructor.
Icon.bike "Accessibility hint"
bluetooth : String -> Icon
Icon constructor.
Icon.bluetooth "Accessibility hint"
boltDisabled : String -> Icon
Icon constructor.
Icon.boltDisabled "Accessibility hint"
bolt : String -> Icon
Icon constructor.
Icon.bolt "Accessibility hint"
boxFilled : String -> Icon
Icon constructor.
Icon.boxFilled "Accessibility hint"
boxOutlined : String -> Icon
Icon constructor.
Icon.boxOutlined "Accessibility hint"
boxesFilled : String -> Icon
Icon constructor.
Icon.boxesFilled "Accessibility hint"
boxesOutlined : String -> Icon
Icon constructor.
Icon.boxesOutlined "Accessibility hint"
calendar : String -> Icon
Icon constructor.
Icon.calendar "Accessibility hint"
camera : String -> Icon
Icon constructor.
Icon.camera "Accessibility hint"
car : String -> Icon
Icon constructor.
Icon.car "Accessibility hint"
cellular : String -> Icon
Icon constructor.
Icon.cellular "Accessibility hint"
checkmarkCircle : String -> Icon
Icon constructor.
Icon.checkmarkCircle "Accessibility hint"
checkmarkRoundedRectangle : String -> Icon
Icon constructor.
Icon.checkmarkRoundedRectangle "Accessibility hint"
checkmark : String -> Icon
Icon constructor.
Icon.checkmark "Accessibility hint"
chevronDown : String -> Icon
Icon constructor.
Icon.chevronDown "Accessibility hint"
chevronLeft : String -> Icon
Icon constructor.
Icon.chevronLeft "Accessibility hint"
chevronRight : String -> Icon
Icon constructor.
Icon.chevronRight "Accessibility hint"
chevronUp : String -> Icon
Icon constructor.
Icon.chevronUp "Accessibility hint"
circle : String -> Icon
Icon constructor.
Icon.circle "Accessibility hint"
clockIssue : String -> Icon
Icon constructor.
Icon.clockIssue "Accessibility hint"
clockLocked : String -> Icon
Icon constructor.
Icon.clockLocked "Accessibility hint"
clock : String -> Icon
Icon constructor.
Icon.clock "Accessibility hint"
closeCircle : String -> Icon
Icon constructor.
Icon.closeCircle "Accessibility hint"
closeRoundedRectangle : String -> Icon
Icon constructor.
Icon.closeRoundedRectangle "Accessibility hint"
close : String -> Icon
Icon constructor.
Icon.close "Accessibility hint"
coins : String -> Icon
Icon constructor.
Icon.coins "Accessibility hint"
collapse : String -> Icon
Icon constructor.
Icon.collapse "Accessibility hint"
crosshair : String -> Icon
Icon constructor.
Icon.crosshair "Accessibility hint"
currencyNote : String -> Icon
Icon constructor.
Icon.currencyNote "Accessibility hint"
directions : String -> Icon
Icon constructor.
Icon.directions "Accessibility hint"
download : String -> Icon
Icon constructor.
Icon.download "Accessibility hint"
eBike : String -> Icon
Icon constructor.
Icon.eBike "Accessibility hint"
eCar : String -> Icon
Icon constructor.
Icon.eCar "Accessibility hint"
eVan : String -> Icon
Icon constructor.
Icon.eVan "Accessibility hint"
edit : String -> Icon
Icon constructor.
Icon.edit "Accessibility hint"
ellipsis : String -> Icon
Icon constructor.
Icon.ellipsis "Accessibility hint"
emailFill : String -> Icon
Icon constructor.
Icon.emailFill "Accessibility hint"
emailOutline : String -> Icon
Icon constructor.
Icon.emailOutline "Accessibility hint"
empty : String -> Icon
Icon constructor.
Icon.empty "Accessibility hint"
expand : String -> Icon
Icon constructor.
Icon.expand "Accessibility hint"
eyeHide : String -> Icon
Icon constructor.
Icon.eyeHide "Accessibility hint"
eye : String -> Icon
Icon constructor.
Icon.eye "Accessibility hint"
filter : String -> Icon
Icon constructor.
Icon.filter "Accessibility hint"
firstPage : String -> Icon
Icon constructor.
Icon.firstPage "Accessibility hint"
fix : String -> Icon
Icon constructor.
Icon.fix "Accessibility hint"
flag : String -> Icon
Icon constructor.
Icon.flag "Accessibility hint"
folder : String -> Icon
Icon constructor.
Icon.folder "Accessibility hint"
food : String -> Icon
Icon constructor.
Icon.food "Accessibility hint"
frozen : String -> Icon
Icon constructor.
Icon.frozen "Accessibility hint"
gVan : String -> Icon
Icon constructor.
Icon.gVan "Accessibility hint"
grocery : String -> Icon
Icon constructor.
Icon.grocery "Accessibility hint"
groups : String -> Icon
Icon constructor.
Icon.groups "Accessibility hint"
hamburger : String -> Icon
Icon constructor.
Icon.hamburger "Accessibility hint"
hand : String -> Icon
Icon constructor.
Icon.hand "Accessibility hint"
home : String -> Icon
Icon constructor.
Icon.home "Accessibility hint"
hourglass : String -> Icon
Icon constructor.
Icon.hourglass "Accessibility hint"
info : String -> Icon
Icon constructor.
Icon.info "Accessibility hint"
keys : String -> Icon
Icon constructor.
Icon.keys "Accessibility hint"
lastPage : String -> Icon
Icon constructor.
Icon.lastPage "Accessibility hint"
legacyApis : String -> Icon
Icon constructor.
Icon.legacyApis "Accessibility hint"
legacyHistorical : String -> Icon
Icon constructor.
Icon.legacyHistorical "Accessibility hint"
legacyLabelPrinter : String -> Icon
Icon constructor.
Icon.legacyLabelPrinter "Accessibility hint"
legacyReport : String -> Icon
Icon constructor.
Icon.legacyReport "Accessibility hint"
legacyRetailerDashboard : String -> Icon
Icon constructor.
Icon.legacyRetailerDashboard "Accessibility hint"
legacySignOut : String -> Icon
Icon constructor.
Icon.legacySignOut "Accessibility hint"
list : String -> Icon
Icon constructor.
Icon.list "Accessibility hint"
location : String -> Icon
Icon constructor.
Icon.location "Accessibility hint"
lock : String -> Icon
Icon constructor.
Icon.lock "Accessibility hint"
logout : String -> Icon
Icon constructor.
Icon.logout "Accessibility hint"
map : String -> Icon
Icon constructor.
Icon.map "Accessibility hint"
mapPinRadius : String -> Icon
Icon constructor.
Icon.mapPinRadius "Accessibility hint"
mapPin : String -> Icon
Icon constructor.
Icon.mapPin "Accessibility hint"
messageLock : String -> Icon
Icon constructor.
Icon.messageLock "Accessibility hint"
messageOTP : String -> Icon
Icon constructor.
Icon.messageOTP "Accessibility hint"
message : String -> Icon
Icon constructor.
Icon.message "Accessibility hint"
microphoneMute : String -> Icon
Icon constructor.
Icon.microphoneMute "Accessibility hint"
microphone : String -> Icon
Icon constructor.
Icon.microphone "Accessibility hint"
minus : String -> Icon
Icon constructor.
Icon.minus "Accessibility hint"
move : String -> Icon
Icon constructor.
Icon.move "Accessibility hint"
notepad : String -> Icon
Icon constructor.
Icon.notepad "Accessibility hint"
notes : String -> Icon
Icon constructor.
Icon.notes "Accessibility hint"
notification : String -> Icon
Icon constructor.
Icon.notification "Accessibility hint"
otp : String -> Icon
Icon constructor.
Icon.otp "Accessibility hint"
personAssign : String -> Icon
Icon constructor.
Icon.personAssign "Accessibility hint"
personAssigned : String -> Icon
Icon constructor.
Icon.personAssigned "Accessibility hint"
personError : String -> Icon
Icon constructor.
Icon.personError "Accessibility hint"
personRemove : String -> Icon
Icon constructor.
Icon.personRemove "Accessibility hint"
personUnassign : String -> Icon
Icon constructor.
Icon.personUnassign "Accessibility hint"
person : String -> Icon
Icon constructor.
Icon.person "Accessibility hint"
personsAdd : String -> Icon
Icon constructor.
Icon.personsAdd "Accessibility hint"
personsNotApplicable : String -> Icon
Icon constructor.
Icon.personsNotApplicable "Accessibility hint"
persons : String -> Icon
Icon constructor.
Icon.persons "Accessibility hint"
phoneEndCall : String -> Icon
Icon constructor.
Icon.phoneEndCall "Accessibility hint"
phoneStartCall : String -> Icon
Icon constructor.
Icon.phoneStartCall "Accessibility hint"
placeholder : String -> Icon
Icon constructor.
Icon.placeholder "Accessibility hint"
printerError : String -> Icon
Icon constructor.
Icon.printerError "Accessibility hint"
printer : String -> Icon
Icon constructor.
Icon.printer "Accessibility hint"
redo : String -> Icon
Icon constructor.
Icon.redo "Accessibility hint"
reload : String -> Icon
Icon constructor.
Icon.reload "Accessibility hint"
remove : String -> Icon
Icon constructor.
Icon.remove "Accessibility hint"
report : String -> Icon
Icon constructor.
Icon.report "Accessibility hint"
reporting : String -> Icon
Icon constructor.
Icon.reporting "Accessibility hint"
reset : String -> Icon
Icon constructor.
Icon.reset "Accessibility hint"
return : String -> Icon
Icon constructor.
Icon.return "Accessibility hint"
scanBarcode : String -> Icon
Icon constructor.
Icon.scanBarcode "Accessibility hint"
scanGroup : String -> Icon
Icon constructor.
Icon.scanGroup "Accessibility hint"
scanPackage : String -> Icon
Icon constructor.
Icon.scanPackage "Accessibility hint"
scanSpace : String -> Icon
Icon constructor.
Icon.scanSpace "Accessibility hint"
scan : String -> Icon
Icon constructor.
Icon.scan "Accessibility hint"
search : String -> Icon
Icon constructor.
Icon.search "Accessibility hint"
settings : String -> Icon
Icon constructor.
Icon.settings "Accessibility hint"
shelves : String -> Icon
Icon constructor.
Icon.shelves "Accessibility hint"
sort : String -> Icon
Icon constructor.
Icon.sort "Accessibility hint"
spaceError : String -> Icon
Icon constructor.
Icon.spaceError "Accessibility hint"
spaceSearch : String -> Icon
Icon constructor.
Icon.spaceSearch "Accessibility hint"
space : String -> Icon
Icon constructor.
Icon.space "Accessibility hint"
speakerMute : String -> Icon
Icon constructor.
Icon.speakerMute "Accessibility hint"
speaker : String -> Icon
Icon constructor.
Icon.speaker "Accessibility hint"
store : String -> Icon
Icon constructor.
Icon.store "Accessibility hint"
tag : String -> Icon
Icon constructor.
Icon.tag "Accessibility hint"
trash : String -> Icon
Icon constructor.
Icon.trash "Accessibility hint"
truck : String -> Icon
Icon constructor.
Icon.truck "Accessibility hint"
undo : String -> Icon
Icon constructor.
Icon.undo "Accessibility hint"
van : String -> Icon
Icon constructor.
Icon.van "Accessibility hint"
walk : String -> Icon
Icon constructor.
Icon.walk "Accessibility hint"
warning : String -> Icon
Icon constructor.
Icon.warning "Accessibility hint"
waves : String -> Icon
Icon constructor.
Icon.waves "Accessibility hint"
webhook : String -> Icon
Icon constructor.
Icon.webhook "Accessibility hint"
fixing : String -> Icon
A monkey wrench with a red ball.
Icon.fixing "Fix something"
loader : String -> Icon
A loading spinner.
Icon.loader "You spin me right 'round"
assignPerson : String -> Icon
A person with a plus sign on the bottom-right.
Icon.assingPerson "Select Manager"
boxes : String -> Icon
Piled up boxes.
Icon.boxes "Stacked boxed"
NOTE: Deprecated name.
check : String -> Icon
A check mark, commonly used inside checkboxes and radio buttons.
Icon.check "Notepad"
NOTE: Deprecated name.
configure : String -> Icon
A gear. Usually used for opening settings managers.
Icon.configure "Open display settings"
NOTE: Deprecated name.
delete : String -> Icon
A trash can with an "x" on it.
Icon.delete "Trash item"
NOTE: Deprecated name.
done : String -> Icon
A notepad with a checkmark.
Icon.done "Mark all as done."
NOTE: Deprecated name.
eventLog : String -> Icon
A chat-like baloon. In Paack's apps this symbolizes the log of actions.
Icon.eventLog "Events"
NOTE: Deprecated name.
fixIssues : String -> Icon
A thunder bolt.
Icon.fixIssues "Fix issues from selected groups"
NOTE: Deprecated name.
insert : String -> Icon
A plus sign within a circle.
Icon.insert "Insert row"
NOTE: Deprecated name.
moreActions : String -> Icon
Three-dot in series horizontally. It's usually used in the web to access less commonly used actions.
Icon.moreActions "More actions"
NOTE: Deprecated name.
nextContent : String -> Icon
An arrow pointing to the right used in chevrons and paginators.
Icon.nextContent "Next page"
NOTE: Deprecated name.
notifications : String -> Icon
A bell for indicating notifications.
Icon.notifications "See notifications"
NOTE: Deprecated name.
paackSpaces : String -> Icon
Internal jargon in Paack.
Icon.paackSpaces "Spaces"
NOTE: Deprecated name.
packages : String -> Icon
"Box-Outlined".
Icon.packages "Order's packages"
NOTE: Deprecated name.
phone : String -> Icon
A phone.
Icon.phone "Call"
NOTE: Deprecated name.
pause : String -> Icon
The hand from the stop sign.
Icon.pause "Paused orders"
NOTE: Deprecated name.
previousContent : String -> Icon
An arrow pointing to the left used in chevrons and paginators.
Icon.previousContent "Previous page"
NOTE: Deprecated name.
print : String -> Icon
An A4 ink printer. Indicates the availability to print something related to the surrounding content.
Icon.print "Printer pacakage's barcode"
NOTE: Deprecated name.
sandwichMenu : String -> Icon
Tree-bar stacked vertically. It's usually used in mobile to toggle left bar menus.
Icon.sandwichMenu "Open pages menu"
NOTE: Deprecated name.
searchSpace : String -> Icon
The space icon with a search icon in the right-bottom.
Icon.searchSpace "Search Space"
NOTE: Deprecated name.
seeMore : String -> Icon
Ellipsis (three-dots horizontally aligned). For showing hidden details.
Icon.seeMore "Read more about this article"
NOTE: Deprecated name.
sortDecreasing : String -> Icon
An arrow pointing up.
Icon.sortDecreasing "Sort from Z to A"
NOTE: Deprecated name.
sortIncreasing : String -> Icon
An arrow pointing down.
Icon.sortIncreasing "Sort from A to Z"
NOTE: Deprecated name.
success : String -> Icon
A check mark in circle, commonly used to indicate a success state.
Icon.success "Success"
NOTE: Deprecated name.
toggle : String -> Icon
A foldable paper, toggle some content between showing/hiding, or full/collapsed.
Icon.toggle "Expand technical details"
NOTE: Deprecated name.
toggleDown : String -> Icon
An arrow pointing down. May indicate the expansion of a hidden content below.
Icon.toggleDown "Expand details"
NOTE: Deprecated name.
toggleUp : String -> Icon
An arrow pointing up. May indicate the collapsing of the content below.
Icon.toggleUp "Collapse details"
NOTE: Deprecated name.
unassignPerson : String -> Icon
A person with a plus sign on the bottom-right.
Icon.assingPerson "Select Manager"
NOTE: Deprecated name.
wait : String -> Icon
An hourglass.
Icon.wait "On hold"
NOTE: Deprecated name.
getHint : Icon -> String
For not creating data duplication, Icon.getHint
can extract the hint from an Icon
.
let
icon =
Icon.seeMore "Read more about this"
in
Element.row []
[ Icon.renderElement renderConfig icon
, Icon.getHint icon
|> Text.body1
|> Text.renderElement renderConfig
]
withColor : UI.Palette.Color -> Icon -> Icon
Icons colors can variate to match text color or contrast with a background.
See Palette.color
and Palette.setContrasting
for how to compose a valid color value.
Icon.search "Search logs"
|> Icon.withColor (Palette.color Palette.tonePrimary Palette.brightnessMiddle)
|> Icon.renderElement renderConfig
withSize : UI.Internal.Size.Size -> Icon -> Icon
With Icon.withSize
, you'll be able to scale the icon between the standard sizes.
Icon.withSize Size.large someIcon
NOTE: Default value is Size.medium
.
withCustomSize : Basics.Int -> Icon -> Icon
With Icon.withCustomSize
, you'll be able to scale the icon using an integer value.
All Icons are constraint to fit inside a 1:1 square.
So the set value also coincides with this square's side length.
E.g., setting Icon.withCustomSize 48
will produce a square with 48px on each side.
Icon.withCustomSize 48 someIcon
NOTE: Default value is 20.
renderElement : UI.RenderConfig.RenderConfig -> Icon -> Element msg
End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.