This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

ClarityUI.Icon

Wrapper around Clarity Icons Custom Element.

For the full Icon Font, see https://vmware.github.io/clarity/documentation/iconography

Use

baseIcon : IconColor -> IconSize -> String -> Html msg

Base Icon Function. Exposes a lot of the clarity icon capabilities

Documentation on Clarity Icons : https://vmware.github.io/clarity/documentation/iconography

icon : String -> Html msg

Curried Shortcut Function.

Creates a default size and color Icon.

iconMd : String -> Html msg

Curried Shortcut Function.

Creates a medium size and default color Icon.

Options

type IconColor = Default | Highlight | Error | Warning | Success | Info | Inverse

Icon Color.

Sets the icon color class

type IconSize = S1 | S2 | S3 | S4 | S5 | S6

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