Tesserae

Emoji

Description

Tesserae integrates the Emoji.css stylesheet and provides an auto-generated strongly typed enum Emoji for easy access to all available emojis. This allows you to use emojis in your UI components with compile-time safety and IntelliSense support.

Usage

You can use the Emoji enum values typically with the Icon component or wherever an emoji icon is expected.

emoji-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new EmojiExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class EmojiExample : IComponent
    {
        public HTMLElement Render()
        {
            // Render a large smile emoji
            var icon = Icon(Emoji.Smile, size: TextSize.Large);
        
            return icon.Render();}
    }
}

Methods

Icon(Emoji emoji, string color = "", TextSize size = TextSize.Medium, TextWeight weight = TextWeight.Regular)

Creates an icon component using the specified emoji.
Parameters:
- emoji: The Emoji enum value to display.
- color: (Optional) CSS color for the icon.
- size: (Optional) Size of the icon (default: Medium).
- weight: (Optional) Font weight (default: Regular).
Returns: An Icon component.

Samples

Displaying Emojis

This sample shows how to display various emojis using the Icon component.

emoji-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new EmojiSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class EmojiSample : IComponent
    {
        public HTMLElement Render()
        {
            return Stack().Children(
                Label("Smile:").Inline().SetContent(Icon(Emoji.Smile)),
                Label("Rocket:").Inline().SetContent(Icon(Emoji.Rocket)),
                Label("Heart:").Inline().SetContent(Icon(Emoji.HeartEyes))
            ).Render();
        }
    }
}

Referenced by

uicons