Constructors for icon font character content
Construct empty icon content as a placeholder
Content.Icon.empty
|> Content.Icon.container "span"
|> Dom.Element.toNode
--> <span></span>
Construct an icon from the Font Awesome collection, licensed under SIL OFL 1.1
"bicycle"
|> Content.Icon.fontAwesome
|> Content.Icon.container "span"
|> Dom.Element.toNode
--> <span>
-- <i class="fa fa-bicycle"></i>
-- </span>
Construct an icon from Google's Material Design collection, licensed under Apache 2.0
"directions_bike"
|> Content.Icon.material
|> Content.Icon.container "span"
|> Dom.Element.toNode
--> <span>
-- <i class="material-icons">directions_bike</i>
-- </span>
Construct an icon from the Open Iconic collection, licensed under MIT
"bug"
|> Content.Icon.openIconic
|> Content.Icon.container "p"
|> Dom.Element.toNode
--> <p>
-- <span class="oi" data-glyph="bug"></span>
-- </p>
Place icon content in a Dom.Element
container, with the HTML tag given
in the first argument
module Content.Icon exposing
( empty, fontAwesome, material, ionicons, openIconic, container )
{-| Constructors for icon font character content
# Constructors
@docs empty, fontAwesome, material, ionicons, openIconic
# Rendering
@docs container
-}
import Dom
import Dom.Node
import Dom.Property
import Dom.Attribute
import Dom.Element
import Content
{-| Construct empty icon content as a placeholder
Content.Icon.empty
|> Content.Icon.container "span"
|> Dom.Element.toNode
--> <span></span>
-}
empty : Content.Icon msg
empty =
[]
|> Content.Icon
{-| Construct an icon from the [Font Awesome](http://fontawesome.io/)
collection, licensed under
[SIL OFL 1.1](http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)
"bicycle"
|> Content.Icon.fontAwesome
|> Content.Icon.container "span"
|> Dom.Element.toNode
--> <span>
-- <i class="fa fa-bicycle"></i>
-- </span>
-}
fontAwesome : String -> Content.Icon msg
fontAwesome name =
[ [ "className"
|> Dom.Property.string ("fa fa-" ++ name)
]
|> Dom.Node.leaf "i"
]
|> Content.Icon
{-| Construct an icon from Google's
[Material Design](https://material.io/icons/) collection, licensed under
[Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0.txt)
"directions_bike"
|> Content.Icon.material
|> Content.Icon.container "span"
|> Dom.Element.toNode
--> <span>
-- <i class="material-icons">directions_bike</i>
-- </span>
-}
material : String -> Content.Icon msg
material name =
[ name
|> Dom.Node.textWrapper "i"
[ "className"
|> Dom.Property.string "material-icons"
]
]
|> Content.Icon
{-| Construct an icon from the [Ionicons](http://ionicons.com/) collection,
licensed under [MIT](https://opensource.org/licenses/MIT)
"android-bicycle"
|> Content.Icon.ionicons
|> Content.Icon.container "span"
|> Dom.Element.toNode
--> <span>
-- <i class="icon ion-android-bicycle"></i>
-- </span>
-}
ionicons : String -> Content.Icon msg
ionicons name =
[ [ "className"
|> Dom.Property.string ("icon ion-" ++ name)
]
|> Dom.Node.leaf "i"
]
|> Content.Icon
{-| Construct an icon from the [Open Iconic](http://useiconic.com/open)
collection, licensed under [MIT](https://opensource.org/licenses/MIT)
"bug"
|> Content.Icon.openIconic
|> Content.Icon.container "p"
|> Dom.Element.toNode
--> <p>
-- <span class="oi" data-glyph="bug"></span>
-- </p>
-}
openIconic : String -> Content.Icon msg
openIconic name =
[ [ "className"
|> Dom.Property.string "oi"
, "data-glyph"
|> Dom.Attribute.string name
]
|> Dom.Node.leaf "span"
]
|> Content.Icon
{-| Place icon content in a `Dom.Element` container, with the HTML tag given
in the first argument
-}
container : String -> Content.Icon msg -> Dom.Element msg
container htmlTag iconContent =
{ tag = htmlTag
, attributes = []
, classes = []
, children =
( case iconContent of
Content.Icon nodeList ->
nodeList
)
, text = ""
, namespace = ""
, keys = []
}