Tile 图标砖

分类着色的图标容器。为文件类型、内容类型这类「一眼要认出来」的场景， 提供一套固定的颜色语言。

基础用法

<SrTile type="dir">
  <SrIcon size="sm"><svg … /></SrIcon>
</SrTile>

<SrTile type="image">
  <SrIcon size="sm"><svg … /></SrIcon>
</SrTile>

为什么固定了颜色

Tile 与 SrIcon 的分工很清楚：

	SrIcon	SrTile
颜色	继承父级	按 type 固定
场景	通用图标	类型标识

这不是重复造轮子。同一类文件在应用各处应当是同一种颜色—— 「图片是紫的、视频是橙的」这种约定若靠每个调用点自己写 color， 迟早会出现「列表里是紫的、详情页里是蓝的」。

把色板收进组件，颜色语言才是统一的。

<SrTile type="default">…</SrTile>
<SrTile type="audio">…</SrTile>
<SrTile type="pdf">…</SrTile>
<SrTile type="text">…</SrTile>

尺寸

<SrTile type="dir" size="sm"><SrIcon size="xs"><svg … /></SrIcon></SrTile>
<SrTile type="dir" size="md"><SrIcon size="sm"><svg … /></SrIcon></SrTile>
<SrTile type="dir" size="lg"><SrIcon size="md"><svg … /></SrIcon></SrTile>

图标尺寸也跟着升一档

size 只控制砖块本身。为了避免「砖变大了、图标没变」，建议同步调整 SrIcon 的尺寸——上面三档分别配 xs / sm / md。

圆角

………

<SrTile type="image" radius="sm">…</SrTile>
<SrTile type="image" radius="lg">…</SrTile>

Props

名称	类型	默认值	说明
type	'default' | 'dir' | 'image' | 'video' | 'audio' | 'pdf' | 'text'	'default'	分类，决定底色与前景色
size	'sm' | 'md' | 'lg'	'md'	砖块尺寸
radius	'sm' | 'md' | 'lg'	'md'	圆角档位

插槽

名称	说明
default	砖块内容，通常是一个 SrIcon

无障碍

• 砖块本身只是视觉容器，不承载语义。图标的含义应由相邻的文字说明， 或由外层可交互元素提供 aria-label
• 纯装饰时给 SrIcon 内的 <svg> 加 aria-hidden="true"