跳到主要内容
Tennantite
EN
文档目录

纹理

九宫格纹理、图标与像素渲染。

重绘策略

GUI 九宫格与进度条为本项目重绘;物品、方块与 HUD 状态图标取自 Minecraft Java 26.3 官方客户端(固定版本与 SHA-1),由 packages/textures/scripts/sync-vanilla-icons.mjs 生成 base64 PNG data URI。方块图标按原版物品渲染合成为等轴三面立方体(rotateX 30° · rotateY 225° · scale 0.625),逐面亮度取 Direction.getShade():顶 1.0 / 北 0.8 / 东 0.6。许可见 packages/textures/LICENSE-ASSETS.md。

九宫格

按钮与面板使用 12×12 源图、slice 3 的 border-image。边框宽度按 --mc-gui 缩放,因此 GUI scale 变化时纹理不会被拉伸模糊。所有纹理类内置 image-rendering: pixelated。

.mc-tex-panel {
  border: calc(var(--mc-gui) * 3) solid transparent;
  border-image: url("/textures/panel.svg") 3 / calc(var(--mc-gui) * 3) stretch;
}

纹理类

类名用途
mc-tex-btn按钮常态
mc-tex-btn--hover按钮悬停 / 聚焦
mc-tex-btn--disabled按钮禁用
mc-tex-btn-success主行动按钮
mc-tex-panel窗口面板
mc-tex-panel-dark半透明暗底
mc-tex-slot物品格槽位
mc-slot-selected选中槽位
mc-tex-text-field文本输入框
mc-tex-slider-track滑条轨道
mc-tex-slider-thumb滑条把手
mc-tex-checkbox复选框
mc-tex-tab标签页
mc-tex-tooltipTooltip
mc-tex-hotbar热键栏
mc-tex-hotbar-selection热键选中框
mc-tex-xp-bg经验条背景
mc-tex-xp-fill经验条填充
mc-tex-boss-bgBoss 条背景
mc-tex-boss-fillBoss 条填充
mc-tex-flame熔炉火焰
mc-tex-arrow熔炉箭头
mc-tex-craft-arrow合成箭头
mc-tex-brew-arrow酿造箭头
mc-tex-bubbles酿造气泡
mc-tex-dirt泥土平铺

图标

air
air-empty
apple
armor
armor-empty
armor-half
baked-potato
blaze-powder
blue-dye
bone
bone-meal
bowl
bread
brown-mushroom
charcoal
clay-ball
coal
copper-ingot
crafting-table
diamond
diamond-chestplate
dirt-block
effect-absorption
effect-bad omen
effect-blindness
effect-breath of the nautilus
effect-conduit power
effect-darkness
effect-dolphins grace
effect-fire resistance
effect-freezing
effect-glowing
effect-haste
effect-health boost
effect-hero of the village
effect-hunger
effect-infested
effect-instant damage
effect-instant health
effect-invisibility
effect-jump boost
effect-levitation
effect-luck
effect-mining fatigue
effect-nausea
effect-night vision
effect-oozing
effect-poison
effect-raid omen
effect-regeneration
effect-resistance
effect-saturation
effect-slow falling
effect-slowness
effect-speed
effect-strength
effect-trial omen
effect-unluck
effect-water breathing
effect-weakness
effect-weaving
effect-wind charged
effect-wither
emerald
experience-bottle
filled-map
flint
glass-bottle
gold-ingot
grass-block
gravel
gunpowder
heart
heart-empty
heart-half
honeycomb
hunger
hunger-empty
hunger-half
ice
icon-accessibility
icon-chat_modified
icon-checkmark
icon-draft_report
icon-info
icon-invite
icon-language
icon-link
icon-link_highlighted
icon-music_notes
icon-new_realm
icon-news
icon-ping_1
icon-ping_2
icon-ping_3
icon-ping_4
icon-ping_5
icon-ping_unknown
icon-search
icon-trial_available
icon-unseen_notification
icon-video_link
icon-video_link_highlighted
iron-block
iron-chestplate
iron-horse-armor
iron-ingot
iron-ore
lapis-lazuli
mushroom-stew
nether-wart
netherite-chestplate
netherite-ingot
netherite-upgrade-smithing-template
oak-log
oak-planks
paper
potato
potion
red-mushroom
redstone
saddle
sand
stone-block
stone-bricks
sugar-cane
sword
wheat
wheat-seeds
import { Icon } from "@tennantite/ui";

<Icon name="grass-block" size={16} />

size 的单位是 GUI px,默认 16。图标默认 aria-hidden;需要语义时由调用方提供 aria-label 或可见文本。

引入

@import "@tennantite/textures/css/textures.css";

纹理类可以用于任意元素,但类名依赖 @tennantite/textures 的 CSS 变量。若只复制单个图标,不需要引入整份纹理样式。