Icon 图标
图标容器。只管尺寸与颜色，不绑定任何图标源。
为什么没有内置图标集
组件库不自带图标数据。原因有三：
- 图标是最容易变的部分。业务方想换个风格（线性换填充、圆角换直角）， 不该被组件库绑住。
- 按需引入才合理。一个组件库塞进上千个图标，绝大多数项目用不到 5%， 却要为全部付费（打包体积）。
- 接入任意图标库的产物。只要你拿得到
viewBox与path， 用SrIcon包一层就能统一尺寸与颜色。
图标的 path 通过默认插槽传入，SrIcon 负责三件事：定尺寸、设颜色、继承 currentColor。
尺寸
四档离散尺寸，对应 14 / 16 / 20 / 24 px。不用任意值，避免与设计令牌脱钩。
vue
<SrIcon size="xs"><svg … /></SrIcon>
<SrIcon size="sm"><svg … /></SrIcon>
<SrIcon size="md"><svg … /></SrIcon>
<SrIcon size="lg"><svg … /></SrIcon>颜色
不传颜色时继承父级的 currentColor——这是默认行为，也是用得最多的方式： 图标应当跟随周围文字的颜色，而不是自成一套。
需要显式指定时用 color。
vue
<!-- 继承父级颜色（推荐） -->
<span style="color: var(--sr-color-primary)">
<SrIcon><svg … /></SrIcon>
</span>
<!-- 显式指定 -->
<SrIcon color="#2bb673"><svg … /></SrIcon>旋转
spin 用于加载中这类持续运动的场景。旋转本身配了 prefers-reduced-motion 降级—— 系统开启「减少动态效果」时会停下。
vue
<SrIcon spin><svg … /></SrIcon>与按钮配合
放在 SrButton 的前后插槽里时，建议用 size="sm"——大尺寸图标会把按钮撑高， 与文字的比例也不协调。
vue
<SrButton variant="primary">
<template #prefix><SrIcon size="sm"><svg … /></SrIcon></template>
新建
</SrButton>Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | 尺寸，对应 14 / 16 / 20 / 24 px |
spin | boolean | false | 是否持续旋转（带减少动态效果降级） |
color | string | '' | 颜色；不传则继承父级 currentColor |
插槽
| 名称 | 说明 |
|---|---|
default | 图标内容，通常是一个 <svg> |
无障碍
- 装饰性图标应加
aria-hidden="true"，避免被读屏软件念出无意义的图形名称 - 图标承担语义时（如「删除」），应由外层可交互元素提供
aria-label， 而不是给<svg>加<title>——后者在多数读屏组合下不会被朗读