Documentation

Icon

16×16 pixel icon container that scales by GUI px without blurring.

import { Icon } from "./index";

/**
 * Icon 预览用例（规格 §5 #4）
*/
export function IconDemo() {
  return (
    <div className="flex flex-wrap items-end gap-12">
      <Icon name="heart" size={9} />
      <Icon name="grass-block" size={16} />
      <Icon name="emerald" size={32} />
      <Icon name="diamond" />
      <Icon name="sword" size={24} />
      <Icon className="border-(length:--mc-gui) border-black" name="stone-block" size={32} />
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/icon

npm install

$pnpm add @tennantite/ui

npm installs the compiled package; use the CLI copy above to adapt the source.

Usage

npm import

import { Icon } from "@tennantite/ui";

CLI copy import

import { Icon } from "@/components/tennantite/icon";

import { Icon } from "./index";

/**
 * Icon 预览用例（规格 §5 #4）
*/
export function IconDemo() {
  return (
    <div className="flex flex-wrap items-end gap-12">
      <Icon name="heart" size={9} />
      <Icon name="grass-block" size={16} />
      <Icon name="emerald" size={32} />
      <Icon name="diamond" />
      <Icon name="sword" size={24} />
      <Icon className="border-(length:--mc-gui) border-black" name="stone-block" size={32} />
    </div>
  );
}

API Reference

Prop	Type	Default	Description
name	PixelIconName	—	Built-in icon name (vanilla PNG data URI from the textures package; block names render via `BlockIcon` isometric rendering).
pixelated	boolean	true	Pixelated rendering (enabled by default, spec §0.4).
size	number	16	Edge length in GUI px (default 16 — vanilla item icon).
src	string	—	Custom image URL (mutually exclusive with name).

Source

packages/ui/src/containers/icon/index.tsx

The npm package keeps the source tree, so you can copy and adapt it directly.