Wrapper around Clarity Icons Custom Element.
For the full Icon Font, see https://vmware.github.io/clarity/documentation/iconography
Base Icon Function. Exposes a lot of the clarity icon capabilities
Documentation on Clarity Icons : https://vmware.github.io/clarity/documentation/iconography
Curried Shortcut Function.
Creates a default size and color Icon.
Curried Shortcut Function.
Creates a medium size and default color Icon.
Icon Color.
Sets the icon color class
Icon Size.
Sets the Icon Size:
S1 = 12px S2 = 16px S3 = 36px S4 = 48px S5 = 64px S6 = 72px
module ClarityUI.Icon exposing (baseIcon, icon, iconMd, IconColor, IconSize)
{-| Wrapper around Clarity Icons Custom Element.
For the full Icon Font, see <https://vmware.github.io/clarity/documentation/iconography>
# Use
@docs baseIcon, icon, iconMd
# Options
@docs IconColor, IconSize
-}
import Html exposing (Html, node)
import Html.Attributes exposing (attribute, class)
{-| Icon Color.
Sets the icon color class
-}
type IconColor
= Default
| Highlight
| Error
| Warning
| Success
| Info
| Inverse
{-| Icon Size.
Sets the Icon Size:
S1 = 12px
S2 = 16px
S3 = 36px
S4 = 48px
S5 = 64px
S6 = 72px
-}
type IconSize
= S1
| S2
| S3
| S4
| S5
| S6
{-| Base Icon Function.
Exposes a lot of the clarity icon capabilities
Documentation on Clarity Icons : <https://vmware.github.io/clarity/documentation/iconography>
-}
baseIcon : IconColor -> IconSize -> String -> Html msg
baseIcon color size name =
let
iconClass =
case color of
Default ->
""
Highlight ->
"is-highlight"
Error ->
"is-error"
Warning ->
"is-warning"
Success ->
"is-success"
Info ->
"is-info"
Inverse ->
"is-inverse"
iconSize =
case size of
S1 ->
"12"
S2 ->
"16"
S3 ->
"36"
S4 ->
"48"
S5 ->
"64"
S6 ->
"72"
in
node
"clr-icon"
[ attribute "shape" name
, attribute "size" iconSize
, class iconClass
]
[]
{-| Curried Shortcut Function.
Creates a default size and color Icon.
-}
icon : String -> Html msg
icon =
baseIcon Default S2
{-| Curried Shortcut Function.
Creates a medium size and default color Icon.
-}
iconMd : String -> Html msg
iconMd =
baseIcon Default S3