用途:在 packages/kilo-vscode/、packages/kilo-ui/ 与共享 packages/ui/ 图标注册表中进行图标相关工作,并区分官方 VS Code workbench 规则与 Kilo 的 webview 设计系统。
选择图标系统:VS Code 命令、菜单与编辑器动作用 Codicon(如 $(add)),必要时用 16x16 单色 SVG,契约见 VS Code 命令图标;活动栏与视图容器按约定用 24x24 居中单色图标,现有 Kilo 品牌为有意例外;市场与扩展品牌用打包品牌资产;Webview 按钮与 UI 用 @kilocode/kilo-ui 的 Icon 或 IconButton;扩展贡献的产品图标用现有 WOFF2 字体条目(如 $(kilo-logo))。已有 Codicon 或注册表图标时不要自绘 SVG;不要跨面混用图标。
仓库约定:先查 packages/kilo-ui/src/components/icon.tsx,再查 packages/ui/src/components/icon.tsx;保留现有键名拼写(多为 kebab-case)。注册表图标是内联 SVG path 字符串,非独立文件,使用 fill="currentColor" 或 stroke="currentColor",不加主题副本或字面色板。共享集多为 viewBox 20 20,另有 16 16;Kilo 专用条目有意用 24 24。渲染尺寸为 16px、20px、24px。品牌资产为 kilo-light.svg、kilo-dark.svg 等,WOFF2 是打包字体而非可编辑图标源。注册表图标默认装饰性,图标按钮需 aria-label 或可见文本。
几何规则:每个图标一个明确语义;从同角色兄弟图标出发,匹配 viewBox、视觉重量、端点、连接与内边距;官方命令 SVG 用 16x16 画布、1px 内边距,视图容器图标用居中 24x24 画布。只用静态 SVG 几何(path、rect、circle 等),注册表图标禁位图、外部资源、渐变、滤镜、嵌入字体与 <style>。缩放时同步调整描边宽度,匹配兄弟图标的端点与连接样式;明暗变体几何保持一致,仅颜色可变。
颜色与注册:webview 注册表图标所有形状用 currentColor,语义色通过组件或 CSS token 施加;Kilo 专用条目加入 packages/kilo-ui/src/components/icon.tsx,仅当有意跨 Kilo 共享时才加入 packages/ui/src/components/icon.tsx;共享图标适当更新画廊;通过 Icon 或 IconButton 使用,勿在调用处复制 path 数据。
工作流:先搜索现有 Codicon 与注册表名称;确定目标面、画布与最近兄弟图标;绘制或重缩放几何;通过该面的常规 API 注册并消费;在 1x 与 2x、明/暗/高对比度明/高对比度暗主题及真实按钮或菜单上下文中检查是否裁切、过淡或过重。
限制:以上为资料明确内容;未提及收费、价格、平台与效果信息。