stephenreddek / elm-emoji / Emoji

This library is for conveniently supporting emoji in Elm applications.

There is a high-level drop-in replacement for Html.text which has to make some extra assumptions about the app, and customizable mapping over emojis.

The high level

text_ : String -> Html a

Convert a String with unicode emoji characters into an Html element containing the text with <img> tags replacing the emojis.

This function produces a <span class='elm-emoji'> containing the text, replacing emojis with <img class='elm-emoji-img elm-emoji-one'> tags pointing to CDN-hosted EmojiOne.

div [] [ text' "Live long and prosper 🖖" ]

Customizable

textWith : (List String -> Html a) -> String -> List (Html a)

Create a customized emoji converter. The function argument maps emoji (identified by the lowercase hex-encoded unicode code point sequence) to Html nodes.

mapEmoji : List String -> Html a
mapEmoji codePoints =
    text ("(I'm code " ++ (String.join "-" codePoints) ++ ")")

div []
    ( textWith mapEmoji "here's a penguin:🐧" )

replaceWithEmojiOne : List String -> Html a

Turn an emoji unicode sequence into an <img> pointing at EmojiOne, with classes elm-emoji-img and elm-emoji-one.

text' : String -> Html a
text' =
    textWith replaceWithEmojiOne >> span [ class "elm-emoji" ]

replaceWithTwemoji : List String -> Html a

Convert an emoji unicode sequence into a Twemoji <img> tag. It will have CSS classes elm-emoji-img and elm-emoji-twem.

text' : String -> Html a
text' body =
    span [] (textWith replaceWithTwemoji body)