UI.Icon

UI.Icon is an implementation of icons using an SVG-spritesheet.

Icons' names are after their proposed action/symbolism instead of describing its shape. Consequently, we don't use the same icon for different operations as these would confuse the end-users.

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.

An icon can be created and rendered as in the following pipeline:

Icon.logout "Logout from this account"
    |> Icon.renderElement renderConfig

Embed

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.NavigationContainer, 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.NavigationContainer!

Building

type Icon

The Icon type is used for describing the component for later rendering.

add : String -> Icon

A plus sign. E.g., used to indicate the creation of new items in tables/lists.

Icon.add "Create new user"

check : String -> Icon

A check mark, commonly used inside checkboxes and radio buttons.

Icon.check "Done"

close : String -> Icon

A times sign. Usually used for closing dialogs.

Icon.close "Close this notification"

collapse : String -> Icon

2 Arrows from the border to the center

Icon.collapse "Collapse view"

configure : String -> Icon

A gear. Usually used for opening settings managers.

Icon.configure "Open display settings"

download : String -> Icon

A group of squares acting as files with an arrow pointing to the bottom

Icon.download "Download CSV"

edit : String -> Icon

A pen. For editing fields/properties.

Icon.edit "Edit contact informations"

fix : String -> Icon

A monkey wrench.

Icon.fix "Fix all invalid values"

fixing : String -> Icon

A monkey wrench with a red ball.

Icon.fixing "Fixing something"

fixIssues : String -> Icon

A thunder bolt.

Icon.fixIssues "Fix issues from selected groups"

eventLog : String -> Icon

A chat-like baloon. In Paack's apps this symbolizes the log of actions.

Icon.eventLog "Events"

expand : String -> Icon

Two arrows from the center to the border

Icon.expand "Expand view"

filter : String -> Icon

A funnel symbol represented by 3 lines horizontally aligned.

Icon.filter "Filter title column"

groups : String -> Icon

A set of dots aligned as a six-sided polygon

Icon.groups "Groups"

logout : String -> Icon

An user/person profile's silhouette.

Icon.logout "Leave/change account"

move : String -> Icon

Two vertical parallel arrows pointing to opposite directions.

Icon.move "Move item"

nextContent : String -> Icon

An arrow pointing to the right used in chevrons and paginators.

Icon.nextContent "Next page"

notifications : String -> Icon

A bell for indicating notifications.

Icon.notifications "See notifications"

paackSpaces : String -> Icon

Internal jargon in Paack.

Icon.paackSpaces "Spaces"

packages : String -> Icon

Packages.

Icon.packages "Packages"

previousContent : String -> Icon

An arrow pointing to the left used in chevrons and paginators.

Icon.previousContent "Previous page"

print : String -> Icon

An A4 ink printer. Indicates the availability to print something related to the surrounding content.

Icon.print "Print pacakage's barcode"

remove : String -> Icon

A circe with a line on center similar to a "No Way" road sign.

Icon.remove "Remove item"

sandwichMenu : String -> Icon

Tree-bar stacked vertically. It's usually used in mobile to toggle left bar menus.

Icon.sandwichMenu "Open pages menu"

search : String -> Icon

A magnifying glass. For use in search-related queries.

Icon.search "Search package with barcode"

searchSpace : String -> Icon

The space icon with a search icon in the right-bottom.

Icon.searchSpace "Search Space"

seeMore : String -> Icon

Ellipsis (three-dots horizontally aligned). For showing hidden details.

Icon.seeMore "Read more about this article"

sortDecreasing : String -> Icon

An arrow pointing up.

Icon.sortDecreasing "Sort from Z to A"

sortIncreasing : String -> Icon

An arrow pointing down.

Icon.sortIncreasing "Sort from A to Z"

toggle : String -> Icon

A foldable paper, toggle some content between showing/hiding, or full/collapsed.

Icon.toggle "Expand technical details"

toggleDown : String -> Icon

An arrow pointing down. May indicate the expansion of a hidden content below.

Icon.toggleDown "Expand details"

toggleUp : String -> Icon

An arrow pointing up. May indicate the collapsing of the content below.

Icon.toggleUp "Collapse details"

delete : String -> Icon

A trash can with an "x" on it.

Icon.delete "Delete item"

warning : String -> Icon

A warning sign (a triangle with an exclamation mark).

Icon.warning "Warning"

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"

Disassemble

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
    ]

Color

withColor : 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

Size

withSize : 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 : 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.

Rendering

renderElement : RenderConfig -> Icon -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.

PaackEng/paack-ui/3.4.0