@needle-tools/engine/src/engine/webcomponents/icons.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

import { Texture } from "three";



/** Returns a HTML element containing an icon. Using https://fonts.google.com/icons   
 * As a string you should pass in the name of the icon, e.g. "add" or "delete" 
 * @returns HTMLElement containing the icon
*/
export function getIconElement(str: string): HTMLElement {
    const span = document.createElement("span");
    span.style.maxWidth = "48px";
    span.style.maxHeight = "48px";
    span.style.overflow = "hidden";
    span.classList.add("material-symbols-outlined", "notranslate");
    span.setAttribute("translate", "no");
    span.innerText = str;
    return span;
}

/**@returns true if the element is an needle engine icon element */
export function isIconElement(element: Node): boolean {
    const span = element as HTMLElement;
    return span.classList?.contains("material-symbols-outlined") || false;
}

const textures = new Map<string, Texture | null>();

export async function getIconTexture(str: string): Promise<Texture | null> {
    const fontname = "Material Symbols Outlined";
    // check if font has loaded
    if (!document.fonts.check(`1em '${fontname}'`)) {
        console.log("Font not loaded yet");
        await document.fonts.ready;
    }
    if (textures.has(str)) {
        return textures.get(str) as Texture | null;
    }
    const canvas = document.createElement("canvas");
    const size = 48;
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext("2d");
    if (ctx) {
        ctx.font = `${size}px '${fontname}'`;
        ctx.fillStyle = "black";
        ctx.fillText(str, 0, size);
        const data = canvas.toDataURL();
        const texture = new Texture();
        texture.name = str + " icon";
        texture.image = new Image();
        texture.image.src = data;
        texture.needsUpdate = true;
        textures.set(str, texture);
        return texture;
    }
    textures.set(str, null);
    return null;
}