文档目录

图标

16×16 像素图标容器，按 GUI px 放大且不模糊。

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

安装

CLI 拷贝

$npx shadcn add @tennantite/icon

npm 直装

$pnpm add @tennantite/ui

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

用法

npm 导入

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

CLI 拷贝导入

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	描述
name	PixelIconName	—	内置图标名（textures 包原版 PNG data URI；方块名走 `BlockIcon` 等轴渲染）。
pixelated	boolean	true	像素渲染（默认开启，规格 §0.4）。
size	number	16	边长（GUI px，默认 16 —— 原版物品图标）。
src	string	—	自定义图片 URL（与 name 二选一）。

源码

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

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