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

Framework.Icon

Demo

Functions

arrows : Color.Color -> Int -> Element.Element msg
chevronDown : Color.Color -> Int -> Element.Element msg
exitFullscreen : Color.Color -> Int -> Element.Element msg
fullscreen : Color.Color -> Int -> Element.Element msg
hide : Color.Color -> Int -> Element.Element msg
home : Color.Color -> Int -> Element.Element msg
introspection : { name : String , description : String , signature : String , variations : List ( String, List ( Element.Element msg1, String ) ) }
mobileNotification : Color.Color -> Int -> Element.Element msg
mobileNotification2 : Color.Color -> Int -> Element.Element msg
mobileRinging : Color.Color -> Int -> Element.Element msg
pencil : Color.Color -> Int -> Element.Element msg
show : Color.Color -> Int -> Element.Element msg
module Framework.Icon
    exposing
        ( arrows
        , chevronDown
        , exitFullscreen
        , fullscreen
        , hide
        , home
        , introspection
        , mobileNotification
        , mobileNotification2
        , mobileRinging
        , pencil
        , show
        )

{-| [Demo](https://lucamug.github.io/elm-style-framework/framework.html)


# Functions

@docs arrows , chevronDown , exitFullscreen , fullscreen , hide , home , introspection , mobileNotification , mobileNotification2 , mobileRinging , pencil , show

-}

import Color
import Element
import Framework.Color exposing (black)
import Framework.ColorManipulation
import Html.Attributes
import Svg
import Svg.Attributes as SA


{-| -}
introspection :
    { name : String
    , description : String
    , signature : String
    , variations : List ( String, List ( Element.Element msg1, String ) )
    }
introspection =
    { name = "Icons"
    , description = "List of SVG icons"
    , signature = "Color.Color -> Int -> Element.Element msg"
    , variations =
        [ ( "Icons"
          , [ ( pencil black 32, "pencil black 32" )
            , ( exitFullscreen black 32, "exitFullscreen black 32" )
            , ( fullscreen black 32, "fullscreen black 32" )
            , ( home black 32, "home black 32" )
            , ( hide black 32, "hide black 32" )
            , ( show black 32, "show black 32" )
            , ( mobileRinging black 32, "mobileRinging black 32" )
            , ( mobileNotification black 32, "mobileNotification black 32" )
            , ( mobileNotification2 black 32, "mobileNotification2 black 32" )
            , ( chevronDown black 32, "chevronDown black 32" )
            , ( arrows black 32, "arrows black 32" )
            ]
          )
        ]
    }


{-| -}
arrows : Color.Color -> Int -> Element.Element msg
arrows _ size =
    Element.html <|
        Svg.svg [ SA.viewBox "0 0 490 490", SA.height <| toString size ]
            [ Svg.path [ SA.d "M112 97c72-65 181-66 254-7l-58 3c-8 0-13 6-13 14 0 7 6 13 13 13h1l89-4c7 0 13-6 13-13v-2l-3-88a14 14 0 0 0-27 1l2 55c-36-29-81-47-129-49A222 222 0 0 0 27 294a13 13 0 0 0 17 10c7-2 11-9 9-16-16-70 6-143 59-191zm350 99a14 14 0 0 0-26 6 195 195 0 0 1-314 196l59-5a13 13 0 1 0-3-27l-88 8c-8 1-13 7-13 15l8 88c1 7 7 13 14 13h1c7-1 13-8 12-15l-5-54a221 221 0 0 0 289-8c60-55 86-138 66-217z" ] []
            ]


{-| -}
home : Color.Color -> Int -> Element.Element msg
home _ size =
    Element.html <|
        Svg.svg [ Html.Attributes.style [ ( "height", toString size ++ "px" ) ], SA.viewBox "0 0 34.94 32.63" ]
            [ Svg.path [ SA.d "M34.94 15.58L17.24 0 0 15.65l1.5 1.66 2.14-1.92v17.25h27.68V15.38l2.14 1.88zM14.8 29.93V21.6h5.35v8.34zm14.27.45H22.4v-11h-9.84v11H5.88v-17L17.25 3l11.82 10.4z", SA.fill "#262626", SA.id "_01" ] []
            ]


{-| -}
pencil : Color.Color -> Int -> Element.Element msg
pencil _ size =
    Element.html <|
        Svg.svg [ Html.Attributes.style [ ( "height", toString size ++ "px" ) ], SA.viewBox "0 0 529 529" ]
            [ Svg.path [ SA.d "M329 89l107 108-272 272L57 361 329 89zm189-26l-48-48a48 48 0 0 0-67 0l-46 46 108 108 53-54c14-14 14-37 0-52zM0 513c-2 9 6 16 15 14l120-29L27 391 0 513z" ] []
            ]


{-| -}
exitFullscreen : Color.Color -> Int -> Element.Element msg
exitFullscreen _ size =
    Element.html <|
        Svg.svg [ Html.Attributes.style [ ( "height", toString size ++ "px" ) ], SA.viewBox "0 0 32 32" ]
            [ Svg.path [ SA.fill "#030104", SA.d "M25 27l4 5 3-3-5-4 5-5H20v12zM0 12h12V0L7 5 3 0 0 3l5 4zm0 17l3 3 4-5 5 5V20H0l5 5zm20-17h12l-5-5 5-4-3-3-4 5-5-5z" ] []
            ]


{-| -}
fullscreen : Color.Color -> Int -> Element.Element msg
fullscreen _ size =
    Element.html <|
        Svg.svg [ Html.Attributes.style [ ( "height", toString size ++ "px" ) ], SA.viewBox "0 0 533 533" ]
            [ Svg.path [ SA.d "M533 0v217l-83-84-100 100-50-50L400 83 317 0h216zM233 350L133 450l84 83H0V317l83 83 100-100 50 50z" ] []
            ]


{-| -}
hide : Color.Color -> Int -> Element.Element msg
hide cl size =
    Element.html <|
        Svg.svg [ SA.viewBox "0 0 512 512", SA.height <| toString size, SA.width <| toString size ]
            [ Svg.path
                [ SA.fill
                    (Framework.ColorManipulation.colorToHex cl)
                , SA.d
                    "M506 241l-89-89-14-13-258 258a227 227 0 0 0 272-37l89-89c8-8 8-22 0-30zM256 363a21 21 0 0 1 0-43c35 0 64-29 64-64a21 21 0 0 1 43 0c0 59-48 107-107 107zM95 152L6 241c-8 8-8 22 0 30l89 89 14 13 258-258c-86-49-198-37-272 37zm161 40c-35 0-64 29-64 64a21 21 0 0 1-43 0c0-59 48-107 107-107a21 21 0 0 1 0 43z"
                ]
                []
            ]


{-| -}
show : Color.Color -> Int -> Element.Element msg
show cl size =
    Element.html <|
        Svg.svg [ SA.viewBox "0 0 512 512", SA.height <| toString size, SA.width <| toString size ]
            [ Svg.path
                [ SA.fill
                    (Framework.ColorManipulation.colorToHex cl)
                , SA.d
                    "M256 192a64 64 0 1 0 0 128 64 64 0 0 0 0-128zm250 49l-89-89c-89-89-233-89-322 0L6 241c-8 8-8 22 0 30l89 89a227 227 0 0 0 322 0l89-89c8-8 8-22 0-30zM256 363a107 107 0 1 1 0-214 107 107 0 0 1 0 214z"
                ]
                []
            ]


{-| -}
mobileNotification2 : Color.Color -> Int -> Element.Element msg
mobileNotification2 cl size =
    Element.html <|
        Svg.svg [ SA.viewBox "0 0 31.68 31.68", SA.height <| toString size ]
            [ Svg.path
                [ SA.fill
                    (Framework.ColorManipulation.colorToHex cl)
                , SA.d "M21.5 25.67H7V3.89h14.5v4.7h1.73V2.3a2.3 2.3 0 0 0-2.3-2.3H7.58a2.3 2.3 0 0 0-2.3 2.3v27.08a2.3 2.3 0 0 0 2.3 2.3h13.33a2.3 2.3 0 0 0 2.3-2.3V19.2H21.5v6.46zM19.4 1.44c.33 0 .59.27.59.6s-.26.58-.59.58-.59-.26-.59-.59.26-.59.59-.59zm-8.24.23h6.19v.67h-6.19v-.67zm5.91 27.55h-5.63V27.5h5.63v1.73z"
                ]
                []
            , Svg.path
                [ SA.fill
                    (Framework.ColorManipulation.colorToHex cl)
                , SA.d "M13.05 9.3v9h1.56L13.05 22l4.54-3.7h8.81v-9H13.05zm12.21 7.86H17.2l-.32.25-1 .81.45-1.06H14.2v-6.71h11.07v6.7z"
                ]
                []
            ]


{-| -}
mobileRinging : Color.Color -> Int -> Element.Element msg
mobileRinging cl size =
    let
        hexColor =
            Framework.ColorManipulation.colorToHex cl
    in
    Element.html <|
        Svg.svg [ SA.viewBox "0 0 60 60", SA.height <| toString size ]
            [ Svg.path [ SA.fill hexColor, SA.d "M43 0H17c-2 0-4 2-4 4v52c0 2 2 4 4 4h26c2 0 4-2 4-4V4c0-2-2-4-4-4zM15 8h30v38H15V8zm2-6h26l2 2v2H15V4l2-2zm26 56H17l-2-2v-8h30v8l-2 2z" ] []
            , Svg.path [ SA.fill hexColor, SA.d "M30 49a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM26 5h4a1 1 0 1 0 0-2h-4a1 1 0 1 0 0 2zm7 0h1a1 1 0 1 0 0-2h-1a1 1 0 1 0 0 2zm24 0a1 1 0 1 0-2 1c4 4 4 10 0 14a1 1 0 1 0 2 1c4-5 4-12 0-16z" ] []
            , Svg.path [ SA.fill hexColor, SA.d "M52 7a1 1 0 1 0-1 1 7 7 0 0 1 0 10 1 1 0 1 0 1 1 8 8 0 0 0 0-12zM5 6a1 1 0 1 0-2-1c-4 4-4 11 0 16a1 1 0 0 0 2 0v-1C1 16 1 10 5 6z" ] []
            , Svg.path [ SA.fill hexColor, SA.d "M9 7H8a8 8 0 0 0 0 12 1 1 0 0 0 1 0v-2a7 7 0 0 1 0-9V7z" ] []
            ]


{-| -}
mobileNotification : Color.Color -> Int -> Element.Element msg
mobileNotification cl size =
    Element.html <|
        Svg.svg [ SA.viewBox "0 0 60 60", SA.height <| toString size ]
            [ Svg.path [ SA.fill (Framework.ColorManipulation.colorToHex cl), SA.d "M20 49a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM17 5h4a1 1 0 1 0 0-2h-4a1 1 0 1 0 0 2zm7 0h1a1 1 0 1 0 0-2h-1a1 1 0 1 0 0 2z" ] []
            , Svg.path [ SA.fill (Framework.ColorManipulation.colorToHex cl), SA.d "M56 12H38V4c0-2-2-4-4-4H8C6 0 4 2 4 4v52c0 2 2 4 4 4h26c2 0 4-2 4-4V33h18V12zM8 2h26l2 2v2H6V4l2-2zm26 56H8l-2-2v-8h30v8l-2 2zm2-12H6V8h30v4H18v21h4v7l9-7h5v13zm18-15H31l-7 5v-5h-4V14h34v17z" ] []
            , Svg.path [ SA.fill (Framework.ColorManipulation.colorToHex cl), SA.d "M25 21h10a1 1 0 1 0 0-2H25a1 1 0 1 0 0 2zm-1 4l1 1h24a1 1 0 1 0 0-2H25l-1 1z" ] []
            ]


{-| -}
chevronDown : Color.Color -> Int -> Element.Element msg
chevronDown _ size =
    Element.html <|
        Svg.svg [ SA.viewBox "0 0 256 256", SA.height <| toString size ]
            [ Svg.path
                [ SA.d "M225.81 48.9L128 146.73 30.19 48.91 0 79.09l128 128 128-128z"
                ]
                []
            ]