Documentation

BlockIcon

Isometric block icon: composes the top / left / right faces with vanilla per-face shading.

import { BlockIcon } from "./index";

/**
 * BlockIcon 预览用例（规格 §5 #6）
 */
export function BlockIconDemo() {
  return (
    <div className="flex flex-wrap items-end gap-12">
      <BlockIcon name="grass-block" />
      <BlockIcon name="stone-block" size={32} />
      <BlockIcon name="oak-log" size={32} />
      <BlockIcon name="crafting-table" size={32} />
      <BlockIcon name="iron-ore" size={24} />
      <BlockIcon name="ice" size={24} />
      <BlockIcon name="sand" />
      <BlockIcon name="oak-planks" />
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/block-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 { BlockIcon } from "@tennantite/ui";

CLI copy import

import { BlockIcon } from "@/components/tennantite/block-icon";

import { BlockIcon } from "./index";

/**
 * BlockIcon 预览用例（规格 §5 #6）
 */
export function BlockIconDemo() {
  return (
    <div className="flex flex-wrap items-end gap-12">
      <BlockIcon name="grass-block" />
      <BlockIcon name="stone-block" size={32} />
      <BlockIcon name="oak-log" size={32} />
      <BlockIcon name="crafting-table" size={32} />
      <BlockIcon name="iron-ore" size={24} />
      <BlockIcon name="ice" size={24} />
      <BlockIcon name="sand" />
      <BlockIcon name="oak-planks" />
    </div>
  );
}

API Reference

Prop	Type	Default	Description
className	string	—	Additional class name appended to the root element.
name	BlockIconName	—	Block icon name (a key of `blockFaces`).
pixelated	boolean	true	Pixelated rendering (enabled by default, spec §0.4).
size	number	16	Edge length in GUI px (default 16 — vanilla item icon).
style	CSSProperties	—	Inline style.

Source

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

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