@needle-tools/engine/lib/engine/webcomponents/icons.js

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) {
    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) {
    const span = element;
    return span.classList?.contains("material-symbols-outlined") || false;
}
const textures = new Map();
export async function getIconTexture(str) {
    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);
    }
    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;
}
//# sourceMappingURL=icons.js.map