Tesserae

UIcons

Description

Tesserae integrates the UIcons icon set and provides an auto-generated strongly typed enum UIcons for easy access. This allows you to use these icons in your UI components with compile-time safety.

Usage

You can use the UIcons enum values typically with the Icon component.

uicons-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 UIconsExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class UIconsExample : IComponent
    {
        public HTMLElement Render()
        {
            // Render a camera icon
            var icon = Icon(UIcons.Camera, size: TextSize.Large);
        
            return icon.Render();}
    }
}

Methods

Icon(UIcons icon, string color = "", TextSize size = TextSize.Medium, TextWeight weight = TextWeight.Regular)

Creates an icon component using the specified UIcon.
Parameters:
- icon: The UIcons 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 UIcons

This sample shows how to display various UIcons.

uicons-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 UIconsSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class UIconsSample : IComponent
    {
        public HTMLElement Render()
        {
            return Stack().Children(
                Label("Camera:").Inline().SetContent(Icon(UIcons.Camera)),
                Label("Settings:").Inline().SetContent(Icon(UIcons.Settings)),
                Label("User:").Inline().SetContent(Icon(UIcons.User, color: "blue"))
            ).Render();
        }
    }
}

Referenced by

icon
emoji