Kilo JetBrains 插件 New UI 图标设计实战从画布规格到暗色变体的完整规范【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode本篇指南以 Kilo 开源仓库中 icon-jetbrains 技能 的标注示例文档为骨架系统讲解在 IntelliJ Platform New UI 下为 Kilo JetBrains 插件编写 SVG 图标的全部规则不同角色对应的画布尺寸、规范调色板、亮/暗双主题变体、以及 10 类典型图标模板的逐条解读。读完你既能照着模板直接产出合规图标也能理解底层加载机制与配色原理避免在主题切换时出现图标消失或对比度崩坏的经典错误。1. 先理解规则IntelliJ 图标引擎的工作方式在动手画任何路径之前必须先明白 Kilo 插件中 SVG 图标的运行约束——它们与 Web 场景下的 SVG 完全不同按字面十六进制颜色重着色IntelliJ 的 SVG 加载器通过匹配字面 hex 值来重着色因此currentColor、CSS 和style块全部无效。每个形状必须显式设置fill/stroke见 SKILL.md 的 Golden rules。纯矢量、无光栅只允许path、rect、circle、line、polyline、polygon禁用渐变、滤镜、内嵌字体文字必须转成轮廓。根svg上必须写fillnone颜色按形状逐一声明。禁止纯黑#000000与调色板外灰色它们无法参与主题化重着色。Kilo 插件通过IconLoader.getIcon()直接从资源目录加载图标。以 KiloActionIcons.kt 为例internal object KiloActionIcons { val add: Icon IconLoader.getIcon(/icons/add-small.svg, KiloActionIcons::class.java) }会话/视图类图标则走icons/views/子目录例如 SessionViewIcons.kt 中的IconLoader.getIcon(/icons/views/$name.svg, ...)。加载是扁平目录查找没有角色子目录结构也没有映射文件——文件名即路径因此命名规范极其重要。2. 图标角色与画布尺寸按角色选画布而非反过来从源码结构看图标角色的尺寸是硬性约定不应自行发明新尺寸。下表来自 SKILL.md 的 Icon roles角色画布文件名模式动作图标菜单、弹窗、工具栏16×16name.svgname_dark.svg树节点图标PSI、结构视图16×16name.svgname_dark.svg工具窗口条带图标紧凑/1616×16name.svgname_dark.svg工具窗口条带图标New UI20×20name20x20.svgname20x20_dark.svg主工具栏New UI20×20name20x20.svgname20x20_dark.svg编辑器 gutter 图标14×14小标记12×12、9×9name.svgname_dark.svg状态栏 / 行内状态16×16name.svgname_dark.svg断点标记14×14子标记 12×12name.svgname_dark.svg运行配置标签与展开箭头16×16chevron*.svg可为 9×916×16name.svgname_dark.svg欢迎/引导页与 Logo16、20、28、48按表面name.svgname_dark.svg不确定时直接在packages/kilo-jetbrains/frontend/src/main/resources/icons/目录找同角色兄弟图标照抄其width/height/viewBox。注意 IntelliJ 会把画布当作单一单元整体缩放因此不要往画布里塞空白填充。2.1 工具窗口图标是四件套而非一对当工具窗口同时具备 16×16 基础版name.svg/name_dark.svg和 20×20 条带版name20x20.svg/name20x20_dark.svg时四份文件必须共享同一视觉隐喻。16×16 基础版还会出现在Search Everywhere、Find Action、右键菜单、Services 工具窗口、最近位置、View ▸ Tool Windows 菜单中——只改20x20会让同一工具窗口在不同入口显示两种图标。本仓库的工具窗口四件套是kilo.svg/kilo_dark.svgkilo20x20.svg/kilo20x20_dark.svg分布在 icons 目录。3. 规范调色板所有颜色的唯一来源所有图标颜色必须取自 palette.md 的规范映射表。因为重着色依赖精确字符串匹配任何一次性取色都会导致主题化失败。下表是绝大多数图标仅需的核心对完整映射请查阅 palette.md角色LightDark主笔画 / 填充#6C707E#CED0D6次级笔画#818594#6F737A禁用 / 微弱填充#EBECF0#43454A强调色 — 蓝#3574F0#548AF7强调色 — 蓝背景#EDF3FF/#E7EFFD#25324D强调色 — 红#DB3B4B#DB5C5C强调色 — 红背景#FFF7F7#402929状态 — 错误填充#E55765#DB5C5C状态 — 警告填充#FFAF0F#F2C55C状态 — 成功填充#55A76A#57965C强调色 — 绿#208A3C#57965C强调色 — 橙#E66D17#C77D55强调色 — 紫#834DF0#B589EC深色徽章内白色字形white匹配的暗色填充如#5E4D33#6C707E↔#CED0D6是整个图标集中使用最频繁的一对。若你的图标需要表中不存在的颜色先找使用相似颜色的兄弟图标复用其精确 hex找不到就修改设计——绝不引入新颜色。#DB3B4B线条强调与#E55765徽章填充的区分是有意为之实心状态圆比线条强调色略饱和。3.1 脚本化亮→暗转换的算法映射palette.md 提供了可直接用于脚本的映射片段节选#6C707E - #CED0D6 primary stroke/fill #818594 - #6F737A secondary stroke #3574F0 - #548AF7 blue #E7EFFD - #25324D blue node fill #DB3B4B - #DB5C5C red #FFF7F7 - #402929 red soft #E55765 - #DB5C5C error badge fill #208A3C - #57965C green #55A76A - #57965C success badge fill #FFAF0F - #F2C55C warning yellow #C27D04 - #D6AE58 gold #834DF0 - #B589EC purple white - (状态字形专用暗色见警告填充段)用这张表做字面 find-and-replace 即可生成_dark.svg但必须人工复查所有 white-on-warm白字暖底场景把白色换成对应的暗色深色字形详见第 10 节。4. 通用骨架与核心组合规则4.1 SVG 骨架svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg !-- 形状按从后到前的顺序排列 -- /svg暗色变体是同一文件、仅把亮色调色板换成暗色搭档——两版几何路径必须逐字节一致否则选择动画和 HiDPI 叠加层会出毛刺。4.2 组合规则速查一个图标一个语义状态徽章、强调点或 叠加可以两个无关字形不行。光学居中而非几何居中加号/箭头/刷新字形略高于中心圆形徽章class、method、status在 16×16 中居中于(cx8, cy8)20×20 中居中于(cx10, cy10)。外围留白16×16 每边至少1 px有效几何位于1..1520×20 至少2 px。圆头端点会越过终点半个线宽1px 圆头端点落在0或16会被画布裁切笔画端点须保持在0.5..15.5内。像素网格对齐笔画轴线放半像素中心x.5填充放整像素保证 1× 渲染清晰几何简单比堆砌精细细节更利于 125%/150% 缩放。文件名 kebab-case 且仅 ASCII如arrow-down-to-line.svg、book-open-check.svg、kilo20x20.svg与 icons 目录现有文件一致。5. 模板精讲10 类标注示例逐一拆解以下模板全部来自 examples.md每个都附暗色变体与设计模式说明可直接当作生成新图标的起点。5.1 单色动作图标16×16—— 主灰笔画 实心字形加号 / 新增动作是最常见的动作图标形态单一实心路径 主灰即可构成完整动作图标svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd clip-ruleevenodd dM7.5 1C7.77614 1 8 1.22386 8 1.5V7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H8V13.5C8 13.7761 7.77614 14 7.5 14C7.22386 14 7 13.7761 7 13.5V8H1.5C1.22386 8 1 7.77614 1 7.5C1 7.22386 1.22386 7 1.5 7H7V1.5C7 1.22386 7.22386 1 7.5 1Z fill#6C707E/ /svg暗色把#6C707E→#CED0D6。仓库中的真实例证 add-small.svg 即此模式fill#6C707E其暗版 add-small_dark.svg 仅将填充换成#CED0D6路径完全一致。5.2 双色动作图标16×16—— 中性底 蓝色强调修饰新增文件动作基础字形用中性灰 贴片用主蓝。16×16 下把修饰字形放在画布右下角(9..15, 9..15)基础字形占据左上三分之二svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd clip-ruleevenodd dM12.5 9C12.7761 9 13 9.22386 13 9.5V12H15.5C15.7761 12 16 12.2239 16 12.5C16 12.7761 15.7761 13 15.5 13H13V15.5C13 15.7761 12.7761 16 12.5 16C12.2239 16 12 15.7761 12 15.5V13H9.5C9.22386 13 9 12.7761 9 12.5C9 12.2239 9.22386 12 9.5 12H12V9.5C12 9.22386 12.2239 9 12.5 9Z fill#3574F0/ path fill-ruleevenodd clip-ruleevenodd dM3 13V5.82843C3 5.29799 3.21071 4.78929 3.58579 4.41421L6.41421 1.58579C6.78929 1.21071 7.29799 1 7.82843 1H11C12.1046 1 13 1.89543 13 3V8H12V3C12 2.44772 11.5523 2 11 2H8V4C8 5.10457 7.10457 6 6 6H4V13C4 13.5523 4.44772 14 5 14H8V15H5C3.89543 15 3 14.1046 3 13ZM4.41421 5L7 2.41421V4C7 4.55228 6.55228 5 6 5H4.41421Z fill#6C707E/ /svg暗色#3574F0→#548AF7#6C707E→#CED0D6。5.3 纯描边动作图标16×16—— 箭头、刷新、编辑刷新动作由多条共享同一颜色的描边子路径构成svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg path dM2.5 9V8C2.5 4.96243 4.96243 2.5 8 2.5C9.10679 2.5 10.1372 2.82692 11 3.38947 stroke#6C707E stroke-linecapround/ path dM5 12.6105C5.86278 13.1731 6.89321 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8V7 stroke#6C707E stroke-linecapround/ path dM0.49997 7.50027L2.5 9.5L4.49998 7.50023 stroke#6C707E stroke-linecapround/ path dM11.5 8.49982L13.5 6.5L15.5 8.49982 stroke#6C707E stroke-linecapround/ /svgstroke-width默认1stroke-linecapround柔和端点路径有转弯时搭配stroke-linejoinround。次级字形弹窗里的箭头、下拉箭头用#818594亮/#6F737A暗替代主灰。仓库实例 plus.svg 展示了 20×20 画布上的描边加号stroke#6C707Estroke-linecapsquare可作为对比参考。5.4 节点图标16×16—— 浅色圆 描边 字形类 / 方法节点是典型的 PSI 节点形态。规则圆恒为cx8 cy8 r6.51px 描边正好居中于像素 1 与 15 之间。填充 柔和背景对描边 强调色。内部字形用同一强调色填充绝不用描边。亮色类 — 蓝色svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg circle cx8 cy8 r6.5 fill#E7EFFD stroke#3574F0/ path dM8.13295 11.5C9.61223 11.5 10.8836 10.6105 11.2075 9.33909H10.2213C9.90229 10.0739 9.11914 10.6057 8.13295 10.6057C6.77936 10.6057 5.80284 9.51796 5.80284 8C5.80284 6.48204 6.77936 5.39434 8.13295 5.39434C9.11914 5.39434 9.90229 5.92611 10.2213 6.66091H11.2075C10.8836 5.3895 9.61223 4.5 8.13295 4.5C6.21859 4.5 4.79248 5.99378 4.79248 8C4.79248 10.0062 6.21859 11.5 8.13295 11.5Z fill#3574F0/ /svg暗色类circle cx8 cy8 r6.5 fill#25324D stroke#548AF7/ path dM8.13295 11.5C9.61223 11.5 10.8836 10.6105 11.2075 9.33909H10.2213C9.90229 10.0739 9.11914 10.6057 8.13295 10.6057C6.77936 10.6057 5.80284 9.51796 5.80284 8C5.80284 6.48204 6.77936 5.39434 8.13295 5.39434C9.11914 5.39434 9.90229 5.92611 10.2213 6.66091H11.2075C10.8836 5.3895 9.61223 4.5 8.13295 4.5C6.21859 4.5 4.79248 5.99378 4.79248 8C4.79248 10.0062 6.21859 11.5 8.13295 11.5Z fill#548AF7/方法红遵循同一模板用#FFF7F7/#DB3B4B亮→#402929/#DB5C5C暗。5.5 状态徽章16×16—— 圆/三角 白色字形错误徽章svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg circle cx8 cy8 r7 fill#E55765/ path dM9 5C9 4.44772 8.55228 4 8 4C7.44772 4 7 4.44772 7 5V7.5C7 8.05229 7.44772 8.5 8 8.5C8.55229 8.5 9 8.05228 9 7.5L9 5Z fillwhite/ path dM8 12C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12Z fillwhite/ /svg警告徽章是同样的思路但用圆角三角填充#FFAF0F亮/#F2C55C暗。暗色主题下警告三角内的字形用#5E4D33而非white白字暖黄底不可读。成功徽章是#55A76A亮/#57965C暗圆内画 2px 描边对勾——strokewhite且stroke-width2。仓库实例 pr-checks-passed.svg 即圆底 白勾形态r6.5的#55A76A圆内是strokewhite stroke-width1.5的对勾印证了状态徽章模板。5.6 工具窗口条带20×20—— 大画布上的单色字形构建工具窗口条带示例路径较长此处保留核心结构svg width20 height20 viewBox0 0 20 20 fillnone xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd clip-ruleevenodd dM4.25 1C4.44891 1 4.63962 1.07907 4.78027 1.21973L5.56055 2H6.43945L7.21973 1.21973L7.33398 1.12598C7.45628 1.04445 7.60085 1 7.75 1H13.125C14.9473 1 16.4277 1.87993 17.4346 3.08105C18.4322 4.27143 19 5.81492 19 7.25C19 7.51735 18.8572 7.76425 18.626 7.89844C18.3948 8.03247 18.11 8.0339 17.8779 7.90137L15.4258 6.5H14.0605L13 7.56055V18.25C13 18.6642 12.6642 19 12.25 19H7.75C7.33579 19 7 18.6642 7 18.25V7.56055L6.43945 7H5.56055L4.78027 7.78027C4.63962 7.92093 4.44891 8 4.25 8H1.75C1.33579 8 1 7.66421 1 7.25V1.75C1 1.33579 1.33579 1 1.75 1H4.25ZM8.5 17.5H11.5V8H8.5V17.5ZM2.5 6.5H3.93945L4.71973 5.71973L4.83398 5.62598C4.95628 5.54445 5.10085 5.5 5.25 5.5H6.75C6.94891 5.5 7.13962 5.57907 7.28027 5.71973L8.06055 6.5H11.9395L13.2197 5.21973L13.334 5.12598C13.4563 5.04445 13.6008 5 13.75 5H15.625C15.7555 5 15.8838 5.03392 15.9971 5.09863L17.2637 5.82227C17.0602 5.19249 16.7287 4.57423 16.2842 4.04395C15.5098 3.12029 14.4276 2.5 13.125 2.5H8.06055L7.28027 3.28027C7.13962 3.42093 6.94891 3.5 6.75 3.5H5.25C5.05109 3.5 4.86038 3.42093 4.71973 3.28027L3.93945 2.5H2.5V6.5Z fill#6C707E/ /svg要点20×20 画布每边至少2 px呼吸空间几何位于2..18。与 16×16 兄弟图标重新平衡——不要直接把 16×16 路径粘进 20×20 viewBox。保留 16×16 兄弟图标name.svg用于紧凑模式20x20变体为默认使用。仓库实例 kilo20x20.svg 展示了真实的 20×20 单色路径fill#6C707E可对照学习。5.7 主工具栏动作20×20—— 与工具窗口同一模板20×20 新增动作svg width20 height20 viewBox0 0 20 20 fillnone xmlnshttp://www.w3.org/2000/svg path dM9.75586 17.25C9.34165 17.25 9.00586 16.9142 9.00586 16.5V10.5059H3C2.58594 10.5059 2.25025 10.1699 2.25 9.75586C2.25 9.34165 2.58579 9.00586 3 9.00586H9.00586V3C9.00607 2.58597 9.34178 2.25 9.75586 2.25C10.1699 2.25 10.5056 2.58597 10.5059 3V9.00586H16.5C16.9142 9.00586 17.25 9.34165 17.25 9.75586C17.2498 10.1699 16.9141 10.5059 16.5 10.5059H10.5059V16.5C10.5059 16.9142 10.1701 17.25 9.75586 17.25Z fill#6C707E/ /svg主工具栏图标复用工具窗口条带的 20×20 约定——画布尺寸与描边权重一致只是视觉语义不同。5.8 Gutter 图标14×14—— 细描边、无留白编辑文档 gutter 标记svg width14 height14 viewBox0 0 14 14 fillnone xmlnshttp://www.w3.org/2000/svg path dM10.5973 6.65471L12.6882 4.56049C13.1053 4.15406 13.1003 3.49602 12.6948 3.08627L11.0267 1.3136L11.0224 1.30932C10.6123 0.900035 9.94199 0.893268 9.53311 1.31079L7.3867 3.44406M10.5973 6.65471L7.3867 3.44406M10.5973 6.65471L4.74041 12.5H1.50036L1.5 9.32001L7.3867 3.44406 stroke#6C707E stroke-miterlimit10/ /svgGutter 图标规则画布是14×14非 16×16字形延伸到边缘——gutter 里没有外部留白。硬尖字形铅笔尖优先用stroke-miterlimit10箭头/chevron 用stroke-linecapround。复合 gutter 字形如 implemented override 标记叠加两个徽章每个徽章 ≤ 9 px 以保证可读性。5.9 断点标记14×14—— 纯实心圆svg width14 height14 viewBox0 0 14 14 fillnone xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd clip-ruleevenodd dM7 13C10.3137 13 13 10.3137 13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13Z fill#E55765/ /svg断点标记一眼可读——单一实心填充使用状态错误红。禁用/条件/日志变体在右下角叠加小覆盖层。5.10 暗色变体的坑白字暖底 vs 暗色浅字警告徽章暗色变体展示了唯一常见的字面查找替换会产出坏图标的场景深色主题下white→#5E4D33警告三角内部svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg path dM1.27603 10.8634L6.3028 1.98903C7.04977 0.670323 8.94893 0.670326 9.69589 1.98903L14.7227 10.8634C15.516 12.2639 14.5047 14 12.8956 14H3.10308C1.494 14 0.482737 12.2639 1.27603 10.8634Z fill#F2C55C/ path dM9 5C9 4.44772 8.55228 4 8 4C7.44772 4 7 4.44772 7 5V7.5C7 8.05229 7.44772 8.5 8 8.5C8.55229 8.5 9 8.05228 9 7.5L9 5Z fill#5E4D33/ path dM8 12C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12Z fill#5E4D33/ /svg通用规则只要亮色图标在暖色填充#FFAF0F、#E66D17等上画白色字形暗色版就把字形换成对应暗色填充冷色填充#3574F0、#208A3C、#DB3B4B上暗色字形保持白色因为对比度仍然足够。6. 生成工作流从零到落地SKILL.md 的 Generation workflow 给出标准七步按上表选定角色与画布尺寸在 icons 目录找至少两个视觉相似的兄弟图标模仿其笔画/填充搭配。在像素网格上布局几何整像素填充、半像素笔画中心光学居中字形。套用规范亮色调色板绝不发明颜色。保存亮色 SVGwidth/height/viewBox与角色匹配svg上fillnone。复制为_dark文件按 palette 映射逐一替换颜色其余路径逐字节不变。放置并接线两份文件放入packages/kilo-jetbrains/frontend/src/main/resources/icons/动作/工具窗口图标或icons/views/会话内聊天/会话图标再从插件的 icon-holder 类中引用如 KiloActionIcons.kt。双主题目验用 IDE 的图片预览查看或运行 IDE 切换View ▸ Appearance ▸ New UI对比并检查条带图标的选择态。7. 适配与缩放已有图标Lucide/Codicon 导入从 Lucide/Codicon通常画在 20 或 24 单位网格上导入或迁移到 16×16 网格不是简单的全部设为 16 默认值几何与每个stroke-width按同一比例缩放16 ÷ 源尺寸保证有意修改前渲染保真。然后才把主字形描边重设为1若原本不是约 1px。发丝线与几何耦合描边保持缩放后的值。复查缩放破坏点圆头端点被画布裁切 → 把端点挪进0.5..15.5与填充边缘齐平的描边如状态点外的徽章环→ 描边在缩放后仍须骑跨填充边界宽度也要随缩放。清晰度是独立的一遍缩放很少落在像素网格上结果保真但未必锐利像素网格吸附是手工的、逐图标的。8. 高频错误清单评审必查项综合 SKILL.md 的 Common mistakes 与 palette.md调色板外颜色如从 Figma 导入未重映射——无法正确主题化评审会拒 PR。亮暗两版几何不一致——选择动画与 HiDPI 叠加层会毛刺。16px 字形放进 20×20 画布不重新平衡——工具窗口/主工具栏图标需要为 20×20 调校几何而非复用 16×16 加空白。使用currentColor、CSS 或style——IntelliJ 图标加载器要求每个形状显式颜色以便按调色板重着色。忘记_dark变体——亮色主题正常切暗色后图标直接隐形。徽章字形外的纯黑#000/ 纯白#FFF——在强调色重着色下会坏。重缩放时把所有stroke-width一律设为1——只有主字形描边是 1px发丝线与填充耦合/环状描边必须随几何缩放否则变粗错位。圆头端点在画布边缘——端点落在0或16会被裁切保持在0.5..15.5。9. 资源索引技能三件套与落地目录图标工作是仓库级约束的一部分icon-jetbrains 技能 被packages/kilo-jetbrains/AGENTS.md等文档引用为 SVG 编写细节的唯一权威来源配套资料如下examples.md —— 本文主题文档10 类角色的标注 SVG 模板。palette.md —— 完整亮↔暗调色板映射与脚本化替换表。icons 目录含views/子目录—— 插件图标的真实存放地是命名与放置的地面真相。KiloActionIcons.kt、SessionViewIcons.kt ——IconLoader加载机制的代码实证。按此规范产出的图标将同时在 Light / Dark 主题、16×16 紧凑模式与 20×20 New UI 条带、以及 HiDPI 缩放下保持清晰、语义一致且可被 IntelliJ 正确重着色。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Kilo JetBrains 插件 New UI 图标设计实战：从画布规格到暗色变体的完整规范
Kilo JetBrains 插件 New UI 图标设计实战从画布规格到暗色变体的完整规范【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode本篇指南以 Kilo 开源仓库中 icon-jetbrains 技能 的标注示例文档为骨架系统讲解在 IntelliJ Platform New UI 下为 Kilo JetBrains 插件编写 SVG 图标的全部规则不同角色对应的画布尺寸、规范调色板、亮/暗双主题变体、以及 10 类典型图标模板的逐条解读。读完你既能照着模板直接产出合规图标也能理解底层加载机制与配色原理避免在主题切换时出现图标消失或对比度崩坏的经典错误。1. 先理解规则IntelliJ 图标引擎的工作方式在动手画任何路径之前必须先明白 Kilo 插件中 SVG 图标的运行约束——它们与 Web 场景下的 SVG 完全不同按字面十六进制颜色重着色IntelliJ 的 SVG 加载器通过匹配字面 hex 值来重着色因此currentColor、CSS 和style块全部无效。每个形状必须显式设置fill/stroke见 SKILL.md 的 Golden rules。纯矢量、无光栅只允许path、rect、circle、line、polyline、polygon禁用渐变、滤镜、内嵌字体文字必须转成轮廓。根svg上必须写fillnone颜色按形状逐一声明。禁止纯黑#000000与调色板外灰色它们无法参与主题化重着色。Kilo 插件通过IconLoader.getIcon()直接从资源目录加载图标。以 KiloActionIcons.kt 为例internal object KiloActionIcons { val add: Icon IconLoader.getIcon(/icons/add-small.svg, KiloActionIcons::class.java) }会话/视图类图标则走icons/views/子目录例如 SessionViewIcons.kt 中的IconLoader.getIcon(/icons/views/$name.svg, ...)。加载是扁平目录查找没有角色子目录结构也没有映射文件——文件名即路径因此命名规范极其重要。2. 图标角色与画布尺寸按角色选画布而非反过来从源码结构看图标角色的尺寸是硬性约定不应自行发明新尺寸。下表来自 SKILL.md 的 Icon roles角色画布文件名模式动作图标菜单、弹窗、工具栏16×16name.svgname_dark.svg树节点图标PSI、结构视图16×16name.svgname_dark.svg工具窗口条带图标紧凑/1616×16name.svgname_dark.svg工具窗口条带图标New UI20×20name20x20.svgname20x20_dark.svg主工具栏New UI20×20name20x20.svgname20x20_dark.svg编辑器 gutter 图标14×14小标记12×12、9×9name.svgname_dark.svg状态栏 / 行内状态16×16name.svgname_dark.svg断点标记14×14子标记 12×12name.svgname_dark.svg运行配置标签与展开箭头16×16chevron*.svg可为 9×916×16name.svgname_dark.svg欢迎/引导页与 Logo16、20、28、48按表面name.svgname_dark.svg不确定时直接在packages/kilo-jetbrains/frontend/src/main/resources/icons/目录找同角色兄弟图标照抄其width/height/viewBox。注意 IntelliJ 会把画布当作单一单元整体缩放因此不要往画布里塞空白填充。2.1 工具窗口图标是四件套而非一对当工具窗口同时具备 16×16 基础版name.svg/name_dark.svg和 20×20 条带版name20x20.svg/name20x20_dark.svg时四份文件必须共享同一视觉隐喻。16×16 基础版还会出现在Search Everywhere、Find Action、右键菜单、Services 工具窗口、最近位置、View ▸ Tool Windows 菜单中——只改20x20会让同一工具窗口在不同入口显示两种图标。本仓库的工具窗口四件套是kilo.svg/kilo_dark.svgkilo20x20.svg/kilo20x20_dark.svg分布在 icons 目录。3. 规范调色板所有颜色的唯一来源所有图标颜色必须取自 palette.md 的规范映射表。因为重着色依赖精确字符串匹配任何一次性取色都会导致主题化失败。下表是绝大多数图标仅需的核心对完整映射请查阅 palette.md角色LightDark主笔画 / 填充#6C707E#CED0D6次级笔画#818594#6F737A禁用 / 微弱填充#EBECF0#43454A强调色 — 蓝#3574F0#548AF7强调色 — 蓝背景#EDF3FF/#E7EFFD#25324D强调色 — 红#DB3B4B#DB5C5C强调色 — 红背景#FFF7F7#402929状态 — 错误填充#E55765#DB5C5C状态 — 警告填充#FFAF0F#F2C55C状态 — 成功填充#55A76A#57965C强调色 — 绿#208A3C#57965C强调色 — 橙#E66D17#C77D55强调色 — 紫#834DF0#B589EC深色徽章内白色字形white匹配的暗色填充如#5E4D33#6C707E↔#CED0D6是整个图标集中使用最频繁的一对。若你的图标需要表中不存在的颜色先找使用相似颜色的兄弟图标复用其精确 hex找不到就修改设计——绝不引入新颜色。#DB3B4B线条强调与#E55765徽章填充的区分是有意为之实心状态圆比线条强调色略饱和。3.1 脚本化亮→暗转换的算法映射palette.md 提供了可直接用于脚本的映射片段节选#6C707E - #CED0D6 primary stroke/fill #818594 - #6F737A secondary stroke #3574F0 - #548AF7 blue #E7EFFD - #25324D blue node fill #DB3B4B - #DB5C5C red #FFF7F7 - #402929 red soft #E55765 - #DB5C5C error badge fill #208A3C - #57965C green #55A76A - #57965C success badge fill #FFAF0F - #F2C55C warning yellow #C27D04 - #D6AE58 gold #834DF0 - #B589EC purple white - (状态字形专用暗色见警告填充段)用这张表做字面 find-and-replace 即可生成_dark.svg但必须人工复查所有 white-on-warm白字暖底场景把白色换成对应的暗色深色字形详见第 10 节。4. 通用骨架与核心组合规则4.1 SVG 骨架svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg !-- 形状按从后到前的顺序排列 -- /svg暗色变体是同一文件、仅把亮色调色板换成暗色搭档——两版几何路径必须逐字节一致否则选择动画和 HiDPI 叠加层会出毛刺。4.2 组合规则速查一个图标一个语义状态徽章、强调点或 叠加可以两个无关字形不行。光学居中而非几何居中加号/箭头/刷新字形略高于中心圆形徽章class、method、status在 16×16 中居中于(cx8, cy8)20×20 中居中于(cx10, cy10)。外围留白16×16 每边至少1 px有效几何位于1..1520×20 至少2 px。圆头端点会越过终点半个线宽1px 圆头端点落在0或16会被画布裁切笔画端点须保持在0.5..15.5内。像素网格对齐笔画轴线放半像素中心x.5填充放整像素保证 1× 渲染清晰几何简单比堆砌精细细节更利于 125%/150% 缩放。文件名 kebab-case 且仅 ASCII如arrow-down-to-line.svg、book-open-check.svg、kilo20x20.svg与 icons 目录现有文件一致。5. 模板精讲10 类标注示例逐一拆解以下模板全部来自 examples.md每个都附暗色变体与设计模式说明可直接当作生成新图标的起点。5.1 单色动作图标16×16—— 主灰笔画 实心字形加号 / 新增动作是最常见的动作图标形态单一实心路径 主灰即可构成完整动作图标svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd clip-ruleevenodd dM7.5 1C7.77614 1 8 1.22386 8 1.5V7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H8V13.5C8 13.7761 7.77614 14 7.5 14C7.22386 14 7 13.7761 7 13.5V8H1.5C1.22386 8 1 7.77614 1 7.5C1 7.22386 1.22386 7 1.5 7H7V1.5C7 1.22386 7.22386 1 7.5 1Z fill#6C707E/ /svg暗色把#6C707E→#CED0D6。仓库中的真实例证 add-small.svg 即此模式fill#6C707E其暗版 add-small_dark.svg 仅将填充换成#CED0D6路径完全一致。5.2 双色动作图标16×16—— 中性底 蓝色强调修饰新增文件动作基础字形用中性灰 贴片用主蓝。16×16 下把修饰字形放在画布右下角(9..15, 9..15)基础字形占据左上三分之二svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd clip-ruleevenodd dM12.5 9C12.7761 9 13 9.22386 13 9.5V12H15.5C15.7761 12 16 12.2239 16 12.5C16 12.7761 15.7761 13 15.5 13H13V15.5C13 15.7761 12.7761 16 12.5 16C12.2239 16 12 15.7761 12 15.5V13H9.5C9.22386 13 9 12.7761 9 12.5C9 12.2239 9.22386 12 9.5 12H12V9.5C12 9.22386 12.2239 9 12.5 9Z fill#3574F0/ path fill-ruleevenodd clip-ruleevenodd dM3 13V5.82843C3 5.29799 3.21071 4.78929 3.58579 4.41421L6.41421 1.58579C6.78929 1.21071 7.29799 1 7.82843 1H11C12.1046 1 13 1.89543 13 3V8H12V3C12 2.44772 11.5523 2 11 2H8V4C8 5.10457 7.10457 6 6 6H4V13C4 13.5523 4.44772 14 5 14H8V15H5C3.89543 15 3 14.1046 3 13ZM4.41421 5L7 2.41421V4C7 4.55228 6.55228 5 6 5H4.41421Z fill#6C707E/ /svg暗色#3574F0→#548AF7#6C707E→#CED0D6。5.3 纯描边动作图标16×16—— 箭头、刷新、编辑刷新动作由多条共享同一颜色的描边子路径构成svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg path dM2.5 9V8C2.5 4.96243 4.96243 2.5 8 2.5C9.10679 2.5 10.1372 2.82692 11 3.38947 stroke#6C707E stroke-linecapround/ path dM5 12.6105C5.86278 13.1731 6.89321 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8V7 stroke#6C707E stroke-linecapround/ path dM0.49997 7.50027L2.5 9.5L4.49998 7.50023 stroke#6C707E stroke-linecapround/ path dM11.5 8.49982L13.5 6.5L15.5 8.49982 stroke#6C707E stroke-linecapround/ /svgstroke-width默认1stroke-linecapround柔和端点路径有转弯时搭配stroke-linejoinround。次级字形弹窗里的箭头、下拉箭头用#818594亮/#6F737A暗替代主灰。仓库实例 plus.svg 展示了 20×20 画布上的描边加号stroke#6C707Estroke-linecapsquare可作为对比参考。5.4 节点图标16×16—— 浅色圆 描边 字形类 / 方法节点是典型的 PSI 节点形态。规则圆恒为cx8 cy8 r6.51px 描边正好居中于像素 1 与 15 之间。填充 柔和背景对描边 强调色。内部字形用同一强调色填充绝不用描边。亮色类 — 蓝色svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg circle cx8 cy8 r6.5 fill#E7EFFD stroke#3574F0/ path dM8.13295 11.5C9.61223 11.5 10.8836 10.6105 11.2075 9.33909H10.2213C9.90229 10.0739 9.11914 10.6057 8.13295 10.6057C6.77936 10.6057 5.80284 9.51796 5.80284 8C5.80284 6.48204 6.77936 5.39434 8.13295 5.39434C9.11914 5.39434 9.90229 5.92611 10.2213 6.66091H11.2075C10.8836 5.3895 9.61223 4.5 8.13295 4.5C6.21859 4.5 4.79248 5.99378 4.79248 8C4.79248 10.0062 6.21859 11.5 8.13295 11.5Z fill#3574F0/ /svg暗色类circle cx8 cy8 r6.5 fill#25324D stroke#548AF7/ path dM8.13295 11.5C9.61223 11.5 10.8836 10.6105 11.2075 9.33909H10.2213C9.90229 10.0739 9.11914 10.6057 8.13295 10.6057C6.77936 10.6057 5.80284 9.51796 5.80284 8C5.80284 6.48204 6.77936 5.39434 8.13295 5.39434C9.11914 5.39434 9.90229 5.92611 10.2213 6.66091H11.2075C10.8836 5.3895 9.61223 4.5 8.13295 4.5C6.21859 4.5 4.79248 5.99378 4.79248 8C4.79248 10.0062 6.21859 11.5 8.13295 11.5Z fill#548AF7/方法红遵循同一模板用#FFF7F7/#DB3B4B亮→#402929/#DB5C5C暗。5.5 状态徽章16×16—— 圆/三角 白色字形错误徽章svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg circle cx8 cy8 r7 fill#E55765/ path dM9 5C9 4.44772 8.55228 4 8 4C7.44772 4 7 4.44772 7 5V7.5C7 8.05229 7.44772 8.5 8 8.5C8.55229 8.5 9 8.05228 9 7.5L9 5Z fillwhite/ path dM8 12C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12Z fillwhite/ /svg警告徽章是同样的思路但用圆角三角填充#FFAF0F亮/#F2C55C暗。暗色主题下警告三角内的字形用#5E4D33而非white白字暖黄底不可读。成功徽章是#55A76A亮/#57965C暗圆内画 2px 描边对勾——strokewhite且stroke-width2。仓库实例 pr-checks-passed.svg 即圆底 白勾形态r6.5的#55A76A圆内是strokewhite stroke-width1.5的对勾印证了状态徽章模板。5.6 工具窗口条带20×20—— 大画布上的单色字形构建工具窗口条带示例路径较长此处保留核心结构svg width20 height20 viewBox0 0 20 20 fillnone xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd clip-ruleevenodd dM4.25 1C4.44891 1 4.63962 1.07907 4.78027 1.21973L5.56055 2H6.43945L7.21973 1.21973L7.33398 1.12598C7.45628 1.04445 7.60085 1 7.75 1H13.125C14.9473 1 16.4277 1.87993 17.4346 3.08105C18.4322 4.27143 19 5.81492 19 7.25C19 7.51735 18.8572 7.76425 18.626 7.89844C18.3948 8.03247 18.11 8.0339 17.8779 7.90137L15.4258 6.5H14.0605L13 7.56055V18.25C13 18.6642 12.6642 19 12.25 19H7.75C7.33579 19 7 18.6642 7 18.25V7.56055L6.43945 7H5.56055L4.78027 7.78027C4.63962 7.92093 4.44891 8 4.25 8H1.75C1.33579 8 1 7.66421 1 7.25V1.75C1 1.33579 1.33579 1 1.75 1H4.25ZM8.5 17.5H11.5V8H8.5V17.5ZM2.5 6.5H3.93945L4.71973 5.71973L4.83398 5.62598C4.95628 5.54445 5.10085 5.5 5.25 5.5H6.75C6.94891 5.5 7.13962 5.57907 7.28027 5.71973L8.06055 6.5H11.9395L13.2197 5.21973L13.334 5.12598C13.4563 5.04445 13.6008 5 13.75 5H15.625C15.7555 5 15.8838 5.03392 15.9971 5.09863L17.2637 5.82227C17.0602 5.19249 16.7287 4.57423 16.2842 4.04395C15.5098 3.12029 14.4276 2.5 13.125 2.5H8.06055L7.28027 3.28027C7.13962 3.42093 6.94891 3.5 6.75 3.5H5.25C5.05109 3.5 4.86038 3.42093 4.71973 3.28027L3.93945 2.5H2.5V6.5Z fill#6C707E/ /svg要点20×20 画布每边至少2 px呼吸空间几何位于2..18。与 16×16 兄弟图标重新平衡——不要直接把 16×16 路径粘进 20×20 viewBox。保留 16×16 兄弟图标name.svg用于紧凑模式20x20变体为默认使用。仓库实例 kilo20x20.svg 展示了真实的 20×20 单色路径fill#6C707E可对照学习。5.7 主工具栏动作20×20—— 与工具窗口同一模板20×20 新增动作svg width20 height20 viewBox0 0 20 20 fillnone xmlnshttp://www.w3.org/2000/svg path dM9.75586 17.25C9.34165 17.25 9.00586 16.9142 9.00586 16.5V10.5059H3C2.58594 10.5059 2.25025 10.1699 2.25 9.75586C2.25 9.34165 2.58579 9.00586 3 9.00586H9.00586V3C9.00607 2.58597 9.34178 2.25 9.75586 2.25C10.1699 2.25 10.5056 2.58597 10.5059 3V9.00586H16.5C16.9142 9.00586 17.25 9.34165 17.25 9.75586C17.2498 10.1699 16.9141 10.5059 16.5 10.5059H10.5059V16.5C10.5059 16.9142 10.1701 17.25 9.75586 17.25Z fill#6C707E/ /svg主工具栏图标复用工具窗口条带的 20×20 约定——画布尺寸与描边权重一致只是视觉语义不同。5.8 Gutter 图标14×14—— 细描边、无留白编辑文档 gutter 标记svg width14 height14 viewBox0 0 14 14 fillnone xmlnshttp://www.w3.org/2000/svg path dM10.5973 6.65471L12.6882 4.56049C13.1053 4.15406 13.1003 3.49602 12.6948 3.08627L11.0267 1.3136L11.0224 1.30932C10.6123 0.900035 9.94199 0.893268 9.53311 1.31079L7.3867 3.44406M10.5973 6.65471L7.3867 3.44406M10.5973 6.65471L4.74041 12.5H1.50036L1.5 9.32001L7.3867 3.44406 stroke#6C707E stroke-miterlimit10/ /svgGutter 图标规则画布是14×14非 16×16字形延伸到边缘——gutter 里没有外部留白。硬尖字形铅笔尖优先用stroke-miterlimit10箭头/chevron 用stroke-linecapround。复合 gutter 字形如 implemented override 标记叠加两个徽章每个徽章 ≤ 9 px 以保证可读性。5.9 断点标记14×14—— 纯实心圆svg width14 height14 viewBox0 0 14 14 fillnone xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd clip-ruleevenodd dM7 13C10.3137 13 13 10.3137 13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13Z fill#E55765/ /svg断点标记一眼可读——单一实心填充使用状态错误红。禁用/条件/日志变体在右下角叠加小覆盖层。5.10 暗色变体的坑白字暖底 vs 暗色浅字警告徽章暗色变体展示了唯一常见的字面查找替换会产出坏图标的场景深色主题下white→#5E4D33警告三角内部svg width16 height16 viewBox0 0 16 16 fillnone xmlnshttp://www.w3.org/2000/svg path dM1.27603 10.8634L6.3028 1.98903C7.04977 0.670323 8.94893 0.670326 9.69589 1.98903L14.7227 10.8634C15.516 12.2639 14.5047 14 12.8956 14H3.10308C1.494 14 0.482737 12.2639 1.27603 10.8634Z fill#F2C55C/ path dM9 5C9 4.44772 8.55228 4 8 4C7.44772 4 7 4.44772 7 5V7.5C7 8.05229 7.44772 8.5 8 8.5C8.55229 8.5 9 8.05228 9 7.5L9 5Z fill#5E4D33/ path dM8 12C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12Z fill#5E4D33/ /svg通用规则只要亮色图标在暖色填充#FFAF0F、#E66D17等上画白色字形暗色版就把字形换成对应暗色填充冷色填充#3574F0、#208A3C、#DB3B4B上暗色字形保持白色因为对比度仍然足够。6. 生成工作流从零到落地SKILL.md 的 Generation workflow 给出标准七步按上表选定角色与画布尺寸在 icons 目录找至少两个视觉相似的兄弟图标模仿其笔画/填充搭配。在像素网格上布局几何整像素填充、半像素笔画中心光学居中字形。套用规范亮色调色板绝不发明颜色。保存亮色 SVGwidth/height/viewBox与角色匹配svg上fillnone。复制为_dark文件按 palette 映射逐一替换颜色其余路径逐字节不变。放置并接线两份文件放入packages/kilo-jetbrains/frontend/src/main/resources/icons/动作/工具窗口图标或icons/views/会话内聊天/会话图标再从插件的 icon-holder 类中引用如 KiloActionIcons.kt。双主题目验用 IDE 的图片预览查看或运行 IDE 切换View ▸ Appearance ▸ New UI对比并检查条带图标的选择态。7. 适配与缩放已有图标Lucide/Codicon 导入从 Lucide/Codicon通常画在 20 或 24 单位网格上导入或迁移到 16×16 网格不是简单的全部设为 16 默认值几何与每个stroke-width按同一比例缩放16 ÷ 源尺寸保证有意修改前渲染保真。然后才把主字形描边重设为1若原本不是约 1px。发丝线与几何耦合描边保持缩放后的值。复查缩放破坏点圆头端点被画布裁切 → 把端点挪进0.5..15.5与填充边缘齐平的描边如状态点外的徽章环→ 描边在缩放后仍须骑跨填充边界宽度也要随缩放。清晰度是独立的一遍缩放很少落在像素网格上结果保真但未必锐利像素网格吸附是手工的、逐图标的。8. 高频错误清单评审必查项综合 SKILL.md 的 Common mistakes 与 palette.md调色板外颜色如从 Figma 导入未重映射——无法正确主题化评审会拒 PR。亮暗两版几何不一致——选择动画与 HiDPI 叠加层会毛刺。16px 字形放进 20×20 画布不重新平衡——工具窗口/主工具栏图标需要为 20×20 调校几何而非复用 16×16 加空白。使用currentColor、CSS 或style——IntelliJ 图标加载器要求每个形状显式颜色以便按调色板重着色。忘记_dark变体——亮色主题正常切暗色后图标直接隐形。徽章字形外的纯黑#000/ 纯白#FFF——在强调色重着色下会坏。重缩放时把所有stroke-width一律设为1——只有主字形描边是 1px发丝线与填充耦合/环状描边必须随几何缩放否则变粗错位。圆头端点在画布边缘——端点落在0或16会被裁切保持在0.5..15.5。9. 资源索引技能三件套与落地目录图标工作是仓库级约束的一部分icon-jetbrains 技能 被packages/kilo-jetbrains/AGENTS.md等文档引用为 SVG 编写细节的唯一权威来源配套资料如下examples.md —— 本文主题文档10 类角色的标注 SVG 模板。palette.md —— 完整亮↔暗调色板映射与脚本化替换表。icons 目录含views/子目录—— 插件图标的真实存放地是命名与放置的地面真相。KiloActionIcons.kt、SessionViewIcons.kt ——IconLoader加载机制的代码实证。按此规范产出的图标将同时在 Light / Dark 主题、16×16 紧凑模式与 20×20 New UI 条带、以及 HiDPI 缩放下保持清晰、语义一致且可被 IntelliJ 正确重着色。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
