lingo3d/lib/editor/Library/ComponentIconImage.js

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { useEffect, useMemo, useState } from "preact/hooks";
import Spinner from "../component/Spinner";
import { editorUrlPtr } from "../../pointers/assetsPathPointers";
const ComponentIconImage = ({ iconName }) => {
    const [loaded, setLoaded] = useState(false);
    const src = useMemo(() => `${editorUrlPtr[0]}${iconName}.png`, [iconName]);
    useEffect(() => {
        const image = new Image();
        image.src = src;
        image.onload = () => setLoaded(true);
    }, []);
    return (_jsxs("div", { style: { width: 50, height: 50 }, children: [!loaded && (_jsx("div", { className: "lingo3d-flexcenter lingo3d-fadein", style: { width: "100%", height: "100%" }, children: _jsx(Spinner, { color: "rgba(255, 255, 255, 0.1)" }) })), loaded && (_jsx("div", { className: "lingo3d-fadein", style: {
                    width: "100%",
                    height: "100%",
                    backgroundImage: `url(${src})`,
                    backgroundSize: "contain",
                    backgroundPosition: "center",
                    backgroundRepeat: "no-repeat"
                } }))] }));
};
export default ComponentIconImage;
//# sourceMappingURL=ComponentIconImage.js.map