文档目录

方块图标

等轴方块图标：按原版物品渲染合成顶 / 左 / 右三面，逐面着色。

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>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/block-icon

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

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

CLI 拷贝导入

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	描述
className	string	—	追加到根元素的类名。
name	BlockIconName	—	方块图标名（`blockFaces` 的键）。
pixelated	boolean	true	像素渲染（默认开启，规格 §0.4）。
size	number	16	边长（GUI px，默认 16 —— 原版物品图标）。
style	CSSProperties	—	内联样式。

源码

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

npm 包保留源码目录，可直接复制改造。