Skip to content

Icon 图标 ​

图标组件。按本地图形体系把图标名解析为字形渲染,支持尺寸与语义色调。

契约源:lh-ui-core/specs/icon.json · 黄金用例:lh-ui-core/cases/icon.json(5 条,已翻译为 xUnit 测试)

端侧落点说明

Windows 端当前用 unicode 字形占位(LhIconTokens.GlyphFor,TextBlock 渲染),生产环境应替换为 FontIcon(Segoe Fluent Icons 矢量资产);这与 button 的占位策略一致。已登记图标名见下方「图标名」一节。

尺寸 ​

三档尺寸映射到 icon.size 令牌。

9:41Icon 尺寸
⌕⌕⌕

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

csharp
var icon = new LhIcon
{
    Name = "search",
    Size = LhIconSize.Large,
};

色调 ​

Tone 决定字形颜色,与语义色令牌一一对应;默认色调取 color.text.primary。

9:41Icon 色调
✓ 默认✓ 主色✓ 成功
⚠ 警告✕ 危险ℹ 信息
✓ 常规✓ 次要

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

图标名 ​

GlyphFor 当前登记的图标名与字形:search ⌕、refresh ↻、check ✓、close ✕、 warning ⚠、info ℹ、back ←、more ⋯、star ★、edit ✎、delete ⌫、 plus +、minus -、arrow →。未登记名回退 ◆。

9:41已登记图标
⌕↻✓✕⚠ℹ←⋯
★✎⌫+-→

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

明暗主题 ​

切换站点右上角主题,模拟器手机框内的图标颜色即变;真机通过 LhTheme.Apply(true) 切换。

9:41暗色图标
★✓⚠

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染;明/暗值全部取自 core 令牌快照

API ​

属性 ​

属性说明类型默认值
Name图标名(本地图标表解析,未登记名回退 ◆)string""
Size图标尺寸,映射到 icon.size.* 令牌LhIconSizeMedium
Tone图标色调,映射到语义色 / 文字色令牌LhIconToneRegular

LhIconSize ​

值尺寸令牌
Smallicon.size.small(16epx)
Mediumicon.size.medium(18epx)
Largeicon.size.large(20epx)

LhIconTone ​

值颜色令牌
Defaultcolor.text.primary
Primarycolor.primary.default
Successcolor.success.default
Warningcolor.warning.default
Dangercolor.danger.default
Infocolor.info.default
Regularcolor.text.regular
Secondarycolor.text.secondary

令牌对照 ​

令牌用途
icon.size.{small,medium,large}三档尺寸
color.text.{primary,regular,secondary}中性色调
color.{primary,success,warning,danger,info}.default语义色调
typography.fontFamily字形字体栈

黄金用例对照 ​

cases/icon.json 的 5 条断言与 xUnit 测试的对应关系(tests/LhIconTests.cs):

case id断言本地测试
click-emits-onclickgate 放行(图标可交互)Click_Emits_OnClick
default-tone-uses-text-primary默认色调取主要文字色令牌Default_Tone_Uses_Text_Primary
primary-tone-uses-primary-token主色调取主色令牌Primary_Tone_Uses_Primary_Token
small-size-uses-small-token小号消费 small 尺寸令牌Small_Size_Uses_Small_Token
render-emits-icon-command有且仅有一条图标指令Render_Emits_Single_Icon_Command

另有暗色专项:Dark_Colors_Come_From_Dark_Tokens / Dimensions_Are_Identical_In_Dark_Mode。 运行:cd lh-ui-windows && dotnet test。