IntelliJ Community New UI 图标实战指南expui SVG 模板、双主题配色与像素网格规则【免费下载链接】intellij-communityIntelliJ IDEA IntelliJ Platform项目地址: https://gitcode.com/GitHub_Trending/in/intellij-community本文基于 IntelliJ Platform 仓库中的图标技能文档 examples.md系统讲解 New UIexpui/图标集的十类 SVG 标准模板——单色动作、双色动作、描边动作、节点图标、状态徽章、工具窗口条纹、主工具栏、Gutter 图标、断点标记以及暗色变体陷阱。读完本文你可以直接照着模板生成符合 JetBrains 官方规范的新图标含_dark双变体理解 IntelliJ 图标引擎按颜色字符串做主题换色的底层机制并在提交前用「常见错误清单」自查避免图标在 Dark 主题下消失或失真。背景Classic UI 与 New UI 并行的图标体系IntelliJ IDE 同时维护 Classic UI 与 New UI 两套界面。代码通过ExperimentalUI.isNewUI()分支图标遵循同样的拆分逻辑旧图标保留在原有资源目录中以兼容 Classic UINew UI 图标统一放在expui/目录树下并在运行时由 icon mapper 将旧图标替换为新图标调用方无需修改任何图标引用。技能文档 SKILL.md 给出的九条「黄金规则」是所有模板的总纲永远交付两个 SVG——浅色主题如addFile.svg与_dark后缀的暗色变体addFile_dark.svg两者几何必须完全一致只有调色板不同。工具窗口图标则需交付四件套name.svg/name_dark.svg/name20x20.svg/name20x20_dark.svg因为 16×16 基础版还出现在 Search Everywhere、Find Action、右键菜单、Services 工具窗口等场景只改20x20会让用户在同一个工具窗口上看到两个不同的图标。只使用规范调色板中的颜色见 palette.md——自选颜色会破坏主题换色与对比度。一个图标角色对应一个画布尺寸不得发明新尺寸或用空白填充。禁止栅格图、渐变、滤镜与内嵌字体——只允许纯路径几何path、rect、circle、line、polyline、polygon文字必须转成轮廓。根svg上必须写fillnone每个图形显式设置fill/stroke绝不依赖 CSS 或currentColor。描边默认stroke-width1、stroke-linecapround、stroke-linejoinround硬尖角用stroke-miterlimit10圆圈徽章内的主角字形才允许用1.5或2的粗描边。像素网格对齐描边轴心落在半像素x.5填充对齐整像素保证 1× 渲染清晰。保留 Apache 2.0 版权注释作为第一行年份与贡献年份一致。文件名使用 camelCase与 action/node ID 对应且保持纯 ASCII。各角色对应的画布尺寸与目录如下摘自 SKILL.md 的 Icon roles 表角色画布文件命名参考目录动作图标菜单/弹窗/工具栏16×16name.svgname_dark.svgexpui/actions/、expui/general/树节点图标PSI/结构视图16×16name.svgname_dark.svgexpui/nodes/工具窗口条纹旧版/1616×16name.svgname_dark.svgexpui/toolwindows/工具窗口条纹New UI20×20name20x20.svgname20x20_dark.svgexpui/toolwindows/主工具栏New UI20×20name20x20.svgname20x20_dark.svgexpui/general/、expui/run/、expui/toolbar/编辑器 Gutter 图标14×14小标记 12×12、9×9name.svgname_dark.svgexpui/gutter/状态栏 / 行内状态16×16name.svgname_dark.svgexpui/status/、expui/inline/断点标记14×14子标记 12×12name.svgname_dark.svgexpui/breakpoints/运行配置标签与展开箭头16×16chevron*.svg可 9×9~16×16name.svgname_dark.svgexpui/run/、expui/general/欢迎页/引导与 Logo16、20、28、48按界面而定name.svgname_dark.svgexpui/ide/、expui/welcome/拿不准尺寸时最稳妥的做法是找同目录下的兄弟图标照抄它的width/height/viewBox。模板 1单色动作图标16×16——主灰描边 实心字形expui/general/add.svg是最常见的动作图标形态一条填充路径、一个主灰#6C707E换掉字形就是一个完整的动作图标。!-- Copyright 2000-2023 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -- 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/ /svgDark 变体把#6C707E换成#CED0D6路径一字不动。注意路径中所有关键坐标都是x.5半像素值7.5、1.5、13.5这正是「填充对齐整像素、描边居中半像素」网格规则在实心字形上的体现。模板 2双色动作图标16×16——中性底形 蓝色强调修饰符expui/actions/addFile.svg基底字形用中性灰「」贴纸用主蓝#3574F0。!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -- 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/ /svgDark 变体#3574F0→#548AF7#6C707E→#CED0D6。布局规律小修饰符、✕、↻、齿轮钉在画布右下角16×16 上是(9..15, 9..15)区域基底字形占据左上约三分之二。这是双色动作图标的标准构图。模板 3纯描边动作图标16×16——箭头、刷新、编辑expui/general/refresh.svg多条描边子路径共用一个颜色。!-- Copyright 2000-2023 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -- 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/ /svg要点stroke-width缺省为1stroke-linecapround柔化端点路径出现弯折时务必搭配stroke-linejoinround。次级字形弹窗箭头、下拉箭头等不用主灰而用#818594浅色/#6F737A暗色。模板 4节点图标16×16——着色圆圈 描边 内嵌字形expui/nodes/class.svg与expui/nodes/method.svg是 PSI 节点图标的标准形态示例中省略号部分为文档原样节选Lightclass——蓝色!-- Copyright 2000-2022 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -- 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 … fill#3574F0/ /svgDarkclasscircle cx8 cy8 r6.5 fill#25324D stroke#548AF7/ path d… fill#548AF7/Method红色沿用同一模板#FFF7F7/#DB3B4B浅色→#402929/#DB5C5C暗色。硬性规则圆圈永远是cx8 cy8 r6.5——这样 1px 描边恰好落在像素 1 与像素 15 之间的网格中心线上填充取「浅色背景对」描边取强调色圈内字形使用与描边同一强调色做填充绝不描边。模板 5状态徽章16×16——白字形 实心圆/三角expui/status/error.svgsvg 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.5C… 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/ /svgexpui/status/warning.svg圆角三角形填充#FFAF0F浅色/#F2C55C暗色。暗色主题下三角形内的字形用#5E4D33而不是白色——暖黄底上的白字无法阅读。expui/status/success.svg#55A76A浅色/#57965C暗色圆圈内放 2px 描边勾——strokewhite、stroke-width2。模板 6工具窗口条纹图标20×20——大画布单色字形expui/toolwindows/build20x20.svg节选svg width20 height20 viewBox0 0 20 20 fillnone xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd clip-ruleevenodd dM4.25 1C4.44891 1 … fill#6C707E/ /svg注意事项20×20 画布四周至少留 2px 呼吸空间几何落在2..18必须相对 16×16 兄弟版重新配重——不能把 16×16 的路径原样贴进 20×20 的 viewBox16×16 条纹旧版/紧凑模式需保留兄弟文件build.svgNew UI 默认使用20x20变体。模板 7主工具栏动作图标20×20——与工具窗口条纹同一模板expui/general/add20x20.svg节选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.5059H3C… fill#6C707E/ /svg主工具栏图标复用工具窗口条纹的 20×20 约定画布尺寸与描边粗细完全一致只有视觉语义不同。模板 8Gutter 图标14×14——细描边、无留白expui/gutter/javadocEdit.svg节选svg width14 height14 viewBox0 0 14 14 fillnone xmlnshttp://www.w3.org/2000/svg path dM10.5973 6.65471L12.6882 4.56049C… stroke#6C707E stroke-miterlimit10/ /svgGutter 图标规则画布是 14×14不是 16×16。字形可延伸到家——gutter 里没有外圈留白硬尖角字形如铅笔尖优先用stroke-miterlimit10箭头/尖括号用stroke-linecapround复合 gutter 字形如 implemented override 标记叠两层徽章每层徽章不超过 9px保证组合后仍可辨认。模板 9断点标记14×14——实心圆expui/breakpoints/breakpoint.svgsvg 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断点标记要求一眼可辨状态错误红#E55765的单一实心填充。变体disabled、conditional、log在右下角叠加小层叠图形。模板 10暗色变体陷阱——暖底白字 vs 暗哑字expui/status/warning_dark.svg展示了最常见的「从浅色 SVG 直接查找替换会产出坏图标」的情况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 d… fill#5E4D33/ path d… fill#5E4D33/ /svg警告三角形内部的字形从white换成#5E4D33。凡是浅色图标在暖色填充#FFAF0F、#E66D17等上画white字形的都要做同样的替换。而冷色填充#3574F0、#208A3C、#DB3B4B上的暗色主题字形仍保持white因为对比度依然足够。调色板light ↔ dark 颜色对与换色原理上面十类模板反复出现的颜色不是随意选的。palette.md 说明IntelliJ 的图标引擎按颜色的精确字符串匹配来做换色所以任何一次性的自选调色都会失败。调色板是对community/platform/icons/src/expui/全量扫描约 2000 个浅色 约 2000 个暗色 SVG后归纳出的规范色表。核心配对角色LightDark主描边/填充主字形#6C707E#CED0D6次级描边箭头、淡字形#818594#6F737A三级描边极淡#A8ADBD#9DA0A8禁用/惰性填充背景#EBECF0#43454A蓝——强调#3574F0#548AF7蓝——节点软底#E7EFFD#25324D蓝——着色面板#EDF3FF#25324D红——强调#DB3B4B#DB5C5C红——软底#FFF7F7#402929错误徽章填充#E55765#DB5C5C绿——强调#208A3C#57965C绿——软底#F2FCF3#253627成功徽章填充#55A76A#57965C橙——强调#E66D17#C77D55橙——软底#FFF4EB#45322B警告黄状态三角#FFAF0F#F2C55C警告软底#FFFAEB/#F7E4CD#3D3223深棕/金#C27D04#D6AE58警告暖底上的暗色字形n/a用white#5E4D33紫——强调#834DF0#B589EC紫——软底#FAF5FF#2F2936两个细节值得注意#6C707E↔#CED0D6是整个图标集中使用频率最高的一对——如果只记一对就记这一对红色的「线条/强调色#DB3B4B」与「徽章填充#E55765」的区分是刻意的实心状态圆比线条强调色略饱和一些。换色约定生成暗色变体时必须一次性替换所有浅色不能混用——调色板配对是为对比度整体调优的。对于脚本化批量生成palette.md 给出了一张可直接做查找替换的 light→dark 映射表例如#6C707E - #CED0D6 主描边/填充 #818594 - #6F737A 次级描边 #3574F0 - #548AF7 蓝 #DB3B4B - #DB5C5C 红 #208A3C - #57965C 绿 #FFAF0F - #F2C55C 警告黄 white - 按状态对应的暗哑色如警告内 #5E4D33脚本可以靠这张表字面替换生成_dark.svg但必须人工复查所有「暖底白字」情况换成暗哑字形。文件的两种放置方式与运行时替换机制New UI SVG 有两种合法放置位置取决于是否已存在 Classic UI 图标只需要 New UI→ 把 SVG及_dark兄弟文件放到expui/role/资源根目录调用方通过插件生成的PluginIcons类直接引用替换已有 Classic UI 图标→ Classic 文件保留在原路径不动New UI SVG 放到对应expui/role/路径并在最近的*IconMappings.json中加一条映射。运行时当ExperimentalUI.isNewUI()为 true 时mapper 用 New UI 文件替换 Classic 文件调用方图标引用保持不变。映射文件的结构摘自 SKILL.md 中引用的community/platform/icons/src/PlatformIconMappings.json{ expui: { actions: { addFile.svg: actions/addFile.svg, checked.svg: [actions/checked.svg, actions/setDefault.svg] } } }键是相对expui/根的路径New UI 文件值是需要解析到它的 Classic 路径——一个 New UI 图标可以服务多个 Classic 路径。当前仓库快照中可以查证到同一机制的实例ImagesIconMappings.json 与 GridIconMappings.json 就是各模块的映射入口Grid 模块的expui/目录 grid/core-impl/resources/icons/expui/ 中同样遵循「xxx.svgxxx_dark.svg成对出现」的命名约定如clearOutputs.svg/clearOutputs_dark.svg可作为模板 1 双变体规则的实物佐证。构图规则与生成工作流SKILL.md 的 Composition rules 对十类模板的共性要求做了归纳一个图标一个语义。状态点、强调点、「」叠加层都允许一个图标里两个无关字形不行。光学居中而非几何居中。加号/箭头/刷新类字形略高于中心圆形徽章class、method、状态在 16×16 上居中于(cx8, cy8)20×20 上居中于(cx10, cy10)。外圈禁入区16×16 图标每侧至少留 1px 空白有效几何在1..15内20×20 留 2px。条纹图标须在 20×20 单元内保持视觉平衡。节点式图标采用描边 填充配对6.5 半径的浅色底 强调色描边 同强调色填充的字形。纯描边图标用中性描边#6C707E/#CED0D6stroke-width1下拉箭头等次级字形用#818594/#6F737A。禁用/纯描边变体*_stroke.svg只有描边轮廓同一中性色无填充。完整的生成工作流七步按角色表选画布尺寸在expui/role/下找至少两个视觉相近的兄弟图标读其 SVG 源码模仿其 stroke/fill 搭配在像素网格上布置几何整像素填充、半像素描边轴心做光学居中套用规范浅色调色板绝不发明颜色保存浅色 SVGApache 2.0 头注释、width/height/viewBox与角色匹配、根节点fillnone复制为_dark文件名把每个颜色替换成调色板中的暗色伙伴路径保持逐字节一致放置并接线新图标直接进expui/role/由PluginIcons引用替换 Classic 图标则保留原文件、新增映射条目调用方继续引用旧路径在两种主题下视觉验证IDE 内图片预览或运行 IDE 切换View ▸ Appearance ▸ New UI对比条纹图标还要检查选中态。常见错误自查清单提交前对照 SKILL.md 列出的 Common mistakes调色板外的颜色例如从 Figma 导入未重新映射——主题换色会失败评审会直接拒绝 PR浅色与暗色变体几何不一致——选中动画和 HiDPI 叠加层会出现抖动/错位把 16px 字形原样塞进 20×20 画布而不重新配重——工具窗口/主工具栏图标必须为 20×20 单独调几何使用currentColor、CSS 或style块——IntelliJ 图标加载器要求每个形状显式着色否则无法做调色板换色漏掉_dark变体——Light 主题下一切正常切到 Dark 主题图标直接「隐形」状态徽章字形规则之外出现纯黑#000或纯白#FFF填充——会在强调色重着色下失效替换 Classic 图标时忘了在*IconMappings.json加条目——New UI 模式下仍会继续显示旧图标。结语与延伸阅读New UI 图标规范的核心可以压缩成三句话双变体几何一致、颜色全部来自规范调色板、画布尺寸由角色唯一决定。十类模板覆盖了从 14×14 gutter 到 20×20 工具窗口条纹的全部实际场景配合 palette.md 的 light↔dark 映射表无论是手工绘制还是脚本批量生成都有可复制、可验证的标准。进一步阅读建议examples.md —— 本文所基于的逐例注释模板SKILL.md —— 黄金规则、角色表、放置方式与工作流全文palette.md —— 完整调色板与脚本换色映射表ImagesIconMappings.json、GridIconMappings.json 与 grid/core-impl/resources/icons/expui/ —— 当前仓库中可查证的双变体实物与映射机制实例。需要说明的是examples.md 声明这些示例「逐字复制自community/platform/icons/src/expui/」但该规范目录所在的community/platform/icons模块未包含在当前仓库快照的顶层目录中本文引用的路径均已核实存在于本快照若你拉取了完整检出可以直接到规范目录对照兄弟图标做 diff 验证。【免费下载链接】intellij-communityIntelliJ IDEA IntelliJ Platform项目地址: https://gitcode.com/GitHub_Trending/in/intellij-community创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
IntelliJ Community New UI 图标实战指南：expui SVG 模板、双主题配色与像素网格规则
IntelliJ Community New UI 图标实战指南expui SVG 模板、双主题配色与像素网格规则【免费下载链接】intellij-communityIntelliJ IDEA IntelliJ Platform项目地址: https://gitcode.com/GitHub_Trending/in/intellij-community本文基于 IntelliJ Platform 仓库中的图标技能文档 examples.md系统讲解 New UIexpui/图标集的十类 SVG 标准模板——单色动作、双色动作、描边动作、节点图标、状态徽章、工具窗口条纹、主工具栏、Gutter 图标、断点标记以及暗色变体陷阱。读完本文你可以直接照着模板生成符合 JetBrains 官方规范的新图标含_dark双变体理解 IntelliJ 图标引擎按颜色字符串做主题换色的底层机制并在提交前用「常见错误清单」自查避免图标在 Dark 主题下消失或失真。背景Classic UI 与 New UI 并行的图标体系IntelliJ IDE 同时维护 Classic UI 与 New UI 两套界面。代码通过ExperimentalUI.isNewUI()分支图标遵循同样的拆分逻辑旧图标保留在原有资源目录中以兼容 Classic UINew UI 图标统一放在expui/目录树下并在运行时由 icon mapper 将旧图标替换为新图标调用方无需修改任何图标引用。技能文档 SKILL.md 给出的九条「黄金规则」是所有模板的总纲永远交付两个 SVG——浅色主题如addFile.svg与_dark后缀的暗色变体addFile_dark.svg两者几何必须完全一致只有调色板不同。工具窗口图标则需交付四件套name.svg/name_dark.svg/name20x20.svg/name20x20_dark.svg因为 16×16 基础版还出现在 Search Everywhere、Find Action、右键菜单、Services 工具窗口等场景只改20x20会让用户在同一个工具窗口上看到两个不同的图标。只使用规范调色板中的颜色见 palette.md——自选颜色会破坏主题换色与对比度。一个图标角色对应一个画布尺寸不得发明新尺寸或用空白填充。禁止栅格图、渐变、滤镜与内嵌字体——只允许纯路径几何path、rect、circle、line、polyline、polygon文字必须转成轮廓。根svg上必须写fillnone每个图形显式设置fill/stroke绝不依赖 CSS 或currentColor。描边默认stroke-width1、stroke-linecapround、stroke-linejoinround硬尖角用stroke-miterlimit10圆圈徽章内的主角字形才允许用1.5或2的粗描边。像素网格对齐描边轴心落在半像素x.5填充对齐整像素保证 1× 渲染清晰。保留 Apache 2.0 版权注释作为第一行年份与贡献年份一致。文件名使用 camelCase与 action/node ID 对应且保持纯 ASCII。各角色对应的画布尺寸与目录如下摘自 SKILL.md 的 Icon roles 表角色画布文件命名参考目录动作图标菜单/弹窗/工具栏16×16name.svgname_dark.svgexpui/actions/、expui/general/树节点图标PSI/结构视图16×16name.svgname_dark.svgexpui/nodes/工具窗口条纹旧版/1616×16name.svgname_dark.svgexpui/toolwindows/工具窗口条纹New UI20×20name20x20.svgname20x20_dark.svgexpui/toolwindows/主工具栏New UI20×20name20x20.svgname20x20_dark.svgexpui/general/、expui/run/、expui/toolbar/编辑器 Gutter 图标14×14小标记 12×12、9×9name.svgname_dark.svgexpui/gutter/状态栏 / 行内状态16×16name.svgname_dark.svgexpui/status/、expui/inline/断点标记14×14子标记 12×12name.svgname_dark.svgexpui/breakpoints/运行配置标签与展开箭头16×16chevron*.svg可 9×9~16×16name.svgname_dark.svgexpui/run/、expui/general/欢迎页/引导与 Logo16、20、28、48按界面而定name.svgname_dark.svgexpui/ide/、expui/welcome/拿不准尺寸时最稳妥的做法是找同目录下的兄弟图标照抄它的width/height/viewBox。模板 1单色动作图标16×16——主灰描边 实心字形expui/general/add.svg是最常见的动作图标形态一条填充路径、一个主灰#6C707E换掉字形就是一个完整的动作图标。!-- Copyright 2000-2023 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -- 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/ /svgDark 变体把#6C707E换成#CED0D6路径一字不动。注意路径中所有关键坐标都是x.5半像素值7.5、1.5、13.5这正是「填充对齐整像素、描边居中半像素」网格规则在实心字形上的体现。模板 2双色动作图标16×16——中性底形 蓝色强调修饰符expui/actions/addFile.svg基底字形用中性灰「」贴纸用主蓝#3574F0。!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -- 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/ /svgDark 变体#3574F0→#548AF7#6C707E→#CED0D6。布局规律小修饰符、✕、↻、齿轮钉在画布右下角16×16 上是(9..15, 9..15)区域基底字形占据左上约三分之二。这是双色动作图标的标准构图。模板 3纯描边动作图标16×16——箭头、刷新、编辑expui/general/refresh.svg多条描边子路径共用一个颜色。!-- Copyright 2000-2023 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -- 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/ /svg要点stroke-width缺省为1stroke-linecapround柔化端点路径出现弯折时务必搭配stroke-linejoinround。次级字形弹窗箭头、下拉箭头等不用主灰而用#818594浅色/#6F737A暗色。模板 4节点图标16×16——着色圆圈 描边 内嵌字形expui/nodes/class.svg与expui/nodes/method.svg是 PSI 节点图标的标准形态示例中省略号部分为文档原样节选Lightclass——蓝色!-- Copyright 2000-2022 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -- 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 … fill#3574F0/ /svgDarkclasscircle cx8 cy8 r6.5 fill#25324D stroke#548AF7/ path d… fill#548AF7/Method红色沿用同一模板#FFF7F7/#DB3B4B浅色→#402929/#DB5C5C暗色。硬性规则圆圈永远是cx8 cy8 r6.5——这样 1px 描边恰好落在像素 1 与像素 15 之间的网格中心线上填充取「浅色背景对」描边取强调色圈内字形使用与描边同一强调色做填充绝不描边。模板 5状态徽章16×16——白字形 实心圆/三角expui/status/error.svgsvg 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.5C… 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/ /svgexpui/status/warning.svg圆角三角形填充#FFAF0F浅色/#F2C55C暗色。暗色主题下三角形内的字形用#5E4D33而不是白色——暖黄底上的白字无法阅读。expui/status/success.svg#55A76A浅色/#57965C暗色圆圈内放 2px 描边勾——strokewhite、stroke-width2。模板 6工具窗口条纹图标20×20——大画布单色字形expui/toolwindows/build20x20.svg节选svg width20 height20 viewBox0 0 20 20 fillnone xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd clip-ruleevenodd dM4.25 1C4.44891 1 … fill#6C707E/ /svg注意事项20×20 画布四周至少留 2px 呼吸空间几何落在2..18必须相对 16×16 兄弟版重新配重——不能把 16×16 的路径原样贴进 20×20 的 viewBox16×16 条纹旧版/紧凑模式需保留兄弟文件build.svgNew UI 默认使用20x20变体。模板 7主工具栏动作图标20×20——与工具窗口条纹同一模板expui/general/add20x20.svg节选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.5059H3C… fill#6C707E/ /svg主工具栏图标复用工具窗口条纹的 20×20 约定画布尺寸与描边粗细完全一致只有视觉语义不同。模板 8Gutter 图标14×14——细描边、无留白expui/gutter/javadocEdit.svg节选svg width14 height14 viewBox0 0 14 14 fillnone xmlnshttp://www.w3.org/2000/svg path dM10.5973 6.65471L12.6882 4.56049C… stroke#6C707E stroke-miterlimit10/ /svgGutter 图标规则画布是 14×14不是 16×16。字形可延伸到家——gutter 里没有外圈留白硬尖角字形如铅笔尖优先用stroke-miterlimit10箭头/尖括号用stroke-linecapround复合 gutter 字形如 implemented override 标记叠两层徽章每层徽章不超过 9px保证组合后仍可辨认。模板 9断点标记14×14——实心圆expui/breakpoints/breakpoint.svgsvg 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断点标记要求一眼可辨状态错误红#E55765的单一实心填充。变体disabled、conditional、log在右下角叠加小层叠图形。模板 10暗色变体陷阱——暖底白字 vs 暗哑字expui/status/warning_dark.svg展示了最常见的「从浅色 SVG 直接查找替换会产出坏图标」的情况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 d… fill#5E4D33/ path d… fill#5E4D33/ /svg警告三角形内部的字形从white换成#5E4D33。凡是浅色图标在暖色填充#FFAF0F、#E66D17等上画white字形的都要做同样的替换。而冷色填充#3574F0、#208A3C、#DB3B4B上的暗色主题字形仍保持white因为对比度依然足够。调色板light ↔ dark 颜色对与换色原理上面十类模板反复出现的颜色不是随意选的。palette.md 说明IntelliJ 的图标引擎按颜色的精确字符串匹配来做换色所以任何一次性的自选调色都会失败。调色板是对community/platform/icons/src/expui/全量扫描约 2000 个浅色 约 2000 个暗色 SVG后归纳出的规范色表。核心配对角色LightDark主描边/填充主字形#6C707E#CED0D6次级描边箭头、淡字形#818594#6F737A三级描边极淡#A8ADBD#9DA0A8禁用/惰性填充背景#EBECF0#43454A蓝——强调#3574F0#548AF7蓝——节点软底#E7EFFD#25324D蓝——着色面板#EDF3FF#25324D红——强调#DB3B4B#DB5C5C红——软底#FFF7F7#402929错误徽章填充#E55765#DB5C5C绿——强调#208A3C#57965C绿——软底#F2FCF3#253627成功徽章填充#55A76A#57965C橙——强调#E66D17#C77D55橙——软底#FFF4EB#45322B警告黄状态三角#FFAF0F#F2C55C警告软底#FFFAEB/#F7E4CD#3D3223深棕/金#C27D04#D6AE58警告暖底上的暗色字形n/a用white#5E4D33紫——强调#834DF0#B589EC紫——软底#FAF5FF#2F2936两个细节值得注意#6C707E↔#CED0D6是整个图标集中使用频率最高的一对——如果只记一对就记这一对红色的「线条/强调色#DB3B4B」与「徽章填充#E55765」的区分是刻意的实心状态圆比线条强调色略饱和一些。换色约定生成暗色变体时必须一次性替换所有浅色不能混用——调色板配对是为对比度整体调优的。对于脚本化批量生成palette.md 给出了一张可直接做查找替换的 light→dark 映射表例如#6C707E - #CED0D6 主描边/填充 #818594 - #6F737A 次级描边 #3574F0 - #548AF7 蓝 #DB3B4B - #DB5C5C 红 #208A3C - #57965C 绿 #FFAF0F - #F2C55C 警告黄 white - 按状态对应的暗哑色如警告内 #5E4D33脚本可以靠这张表字面替换生成_dark.svg但必须人工复查所有「暖底白字」情况换成暗哑字形。文件的两种放置方式与运行时替换机制New UI SVG 有两种合法放置位置取决于是否已存在 Classic UI 图标只需要 New UI→ 把 SVG及_dark兄弟文件放到expui/role/资源根目录调用方通过插件生成的PluginIcons类直接引用替换已有 Classic UI 图标→ Classic 文件保留在原路径不动New UI SVG 放到对应expui/role/路径并在最近的*IconMappings.json中加一条映射。运行时当ExperimentalUI.isNewUI()为 true 时mapper 用 New UI 文件替换 Classic 文件调用方图标引用保持不变。映射文件的结构摘自 SKILL.md 中引用的community/platform/icons/src/PlatformIconMappings.json{ expui: { actions: { addFile.svg: actions/addFile.svg, checked.svg: [actions/checked.svg, actions/setDefault.svg] } } }键是相对expui/根的路径New UI 文件值是需要解析到它的 Classic 路径——一个 New UI 图标可以服务多个 Classic 路径。当前仓库快照中可以查证到同一机制的实例ImagesIconMappings.json 与 GridIconMappings.json 就是各模块的映射入口Grid 模块的expui/目录 grid/core-impl/resources/icons/expui/ 中同样遵循「xxx.svgxxx_dark.svg成对出现」的命名约定如clearOutputs.svg/clearOutputs_dark.svg可作为模板 1 双变体规则的实物佐证。构图规则与生成工作流SKILL.md 的 Composition rules 对十类模板的共性要求做了归纳一个图标一个语义。状态点、强调点、「」叠加层都允许一个图标里两个无关字形不行。光学居中而非几何居中。加号/箭头/刷新类字形略高于中心圆形徽章class、method、状态在 16×16 上居中于(cx8, cy8)20×20 上居中于(cx10, cy10)。外圈禁入区16×16 图标每侧至少留 1px 空白有效几何在1..15内20×20 留 2px。条纹图标须在 20×20 单元内保持视觉平衡。节点式图标采用描边 填充配对6.5 半径的浅色底 强调色描边 同强调色填充的字形。纯描边图标用中性描边#6C707E/#CED0D6stroke-width1下拉箭头等次级字形用#818594/#6F737A。禁用/纯描边变体*_stroke.svg只有描边轮廓同一中性色无填充。完整的生成工作流七步按角色表选画布尺寸在expui/role/下找至少两个视觉相近的兄弟图标读其 SVG 源码模仿其 stroke/fill 搭配在像素网格上布置几何整像素填充、半像素描边轴心做光学居中套用规范浅色调色板绝不发明颜色保存浅色 SVGApache 2.0 头注释、width/height/viewBox与角色匹配、根节点fillnone复制为_dark文件名把每个颜色替换成调色板中的暗色伙伴路径保持逐字节一致放置并接线新图标直接进expui/role/由PluginIcons引用替换 Classic 图标则保留原文件、新增映射条目调用方继续引用旧路径在两种主题下视觉验证IDE 内图片预览或运行 IDE 切换View ▸ Appearance ▸ New UI对比条纹图标还要检查选中态。常见错误自查清单提交前对照 SKILL.md 列出的 Common mistakes调色板外的颜色例如从 Figma 导入未重新映射——主题换色会失败评审会直接拒绝 PR浅色与暗色变体几何不一致——选中动画和 HiDPI 叠加层会出现抖动/错位把 16px 字形原样塞进 20×20 画布而不重新配重——工具窗口/主工具栏图标必须为 20×20 单独调几何使用currentColor、CSS 或style块——IntelliJ 图标加载器要求每个形状显式着色否则无法做调色板换色漏掉_dark变体——Light 主题下一切正常切到 Dark 主题图标直接「隐形」状态徽章字形规则之外出现纯黑#000或纯白#FFF填充——会在强调色重着色下失效替换 Classic 图标时忘了在*IconMappings.json加条目——New UI 模式下仍会继续显示旧图标。结语与延伸阅读New UI 图标规范的核心可以压缩成三句话双变体几何一致、颜色全部来自规范调色板、画布尺寸由角色唯一决定。十类模板覆盖了从 14×14 gutter 到 20×20 工具窗口条纹的全部实际场景配合 palette.md 的 light↔dark 映射表无论是手工绘制还是脚本批量生成都有可复制、可验证的标准。进一步阅读建议examples.md —— 本文所基于的逐例注释模板SKILL.md —— 黄金规则、角色表、放置方式与工作流全文palette.md —— 完整调色板与脚本换色映射表ImagesIconMappings.json、GridIconMappings.json 与 grid/core-impl/resources/icons/expui/ —— 当前仓库中可查证的双变体实物与映射机制实例。需要说明的是examples.md 声明这些示例「逐字复制自community/platform/icons/src/expui/」但该规范目录所在的community/platform/icons模块未包含在当前仓库快照的顶层目录中本文引用的路径均已核实存在于本快照若你拉取了完整检出可以直接到规范目录对照兄弟图标做 diff 验证。【免费下载链接】intellij-communityIntelliJ IDEA IntelliJ Platform项目地址: https://gitcode.com/GitHub_Trending/in/intellij-community创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
