Image

<Image src label> draws a picture from a file: an item’s sprite, a portrait, a map. An icon from the engine’s set is an Icon, which loads no file.

Its props are in Image.

src is the picture’s address, as an import of the file or a path the game serves gives it. label says what the picture shows, for a screen reader; a picture that only decorates passes label="", and a screen reader passes over it. className sets its size and fit, and [image-rendering:pixelated] keeps pixel art’s edges at any size. style takes what comes from data, such as a place on a grid.

The picture starts no drag of the browser’s own, so a game’s drag of the slot it sits in keeps the pointer. Roblox calls this an ImageLabel, Unity and Unreal an Image, and Godot a TextureRect.

import { Button, Image } from "@spawnite/engine";
import sword from "./sword.png";

export function SwordSlot({ onUse }: { onUse: () => void }) {
    return (
        <Button label="Iron sword" onPress={onUse}>
            <Image
                src={sword}
                label=""
                className="size-10 [image-rendering:pixelated]"
            />
        </Button>
    );
}