SVG 图标

import { RIcon } from "@/components";
import type { IconName } from "@/icons";

const name: IconName = "directional/resize_h";

const renderIcon = () => <RIcon name={name} size={24} />;

RIcon.name 和路由 meta.icon 使用同一套完整分包名。将 SVG 加入 src/icons/<分包>，例如 src/icons/business/orders/approved.svg 对应 business/orders/approved。可在演示的 SVG 图标页面查找并复制用法。

添加和生成

1. 选择现有分包（如 action、navigation、system），或按业务新建分包。路径段使用小写字母、数字、下划线或连字符，且以字母开头。
2. 单色图标用 currentColor，留白用 none。品牌和插画保留原色。
3. 开发服务或 pnpm icons:generate 更新 src/icons/manifest.ts；检查 pnpm icons:check，与 SVG 一起提交。不要手改联合类型。

生产时每个顶层分包生成独立、带 hash 的雪碧图，资源随部署 base 加载。迁移时直接改旧代码的裸名称；旧缓存仅当文件名唯一时自动转换。

图标流程与分包表

RIcon API

RIcon、IconProps、iconProps、IconName 和 IconPackage 从 @/components 导出。也可从 @/icons 导入图标类型。

属性	默认	说明
name	必填	完整的分包路径，首段用于选择雪碧图。
size	14	基础宽高，数字按像素，也可传 CSS 尺寸。
width / height	0 / 0	分别覆盖基础尺寸，0 回退到 size。
color	'currentColor'	SVG 填充色；带原色的品牌和插画不会全部被覆盖。
prefix	'icon'	symbol 前缀，须与生成配置一致。
customClassName	无	根元素的额外类名。
depth	1	图标透明层级。
cursor	'default'	指针样式。
onClick(event)	无	支持函数或回调数组。

图标内部 SVG 对读屏隐藏。如果用图标触发操作，把它放进具有可访问名称的按钮内，保留键盘操作和焦点。

RIcon Props · 雪碧图引用实现