[{"data":1,"prerenderedAt":1201},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ficons":199,"\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ficons-surround":1196},[4,9,41,111,116,132],{"title":5,"path":6,"stem":7,"icon":8},"准备","\u002Fdocs\u002Fpreparation","1.docs\u002F1.preparation","i-lucide-rocket",{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":40},"用户手册","i-lucide-book-open","\u002Fdocs\u002Fgetting-started","1.docs\u002F2.getting-started",[15,20,25,30,35],{"title":16,"path":17,"stem":18,"icon":19},"认识 UDhold","\u002Fdocs\u002Fgetting-started\u002Fwhat-is-udhold","1.docs\u002F2.getting-started\u002F1.what-is-udhold","i-lucide-info",{"title":21,"path":22,"stem":23,"icon":24},"核心概念","\u002Fdocs\u002Fgetting-started\u002Fcore-concepts","1.docs\u002F2.getting-started\u002F2.core-concepts","i-lucide-lightbulb",{"title":26,"path":27,"stem":28,"icon":29},"主面板布局","\u002Fdocs\u002Fgetting-started\u002Fmain-interface","1.docs\u002F2.getting-started\u002F3.main-interface","i-lucide-monitor",{"title":31,"path":32,"stem":33,"icon":34},"快速上手 5 分钟","\u002Fdocs\u002Fgetting-started\u002Fquick-tour","1.docs\u002F2.getting-started\u002F4.quick-tour","i-lucide-zap",{"title":36,"path":37,"stem":38,"icon":39},"常用快捷键","\u002Fdocs\u002Fgetting-started\u002Fshortcut-keys","1.docs\u002F2.getting-started\u002F5.shortcut-keys","i-lucide-keyboard",false,{"title":42,"path":43,"stem":44,"children":45,"icon":110},"核心功能","\u002Fdocs\u002Ffeatures","1.docs\u002F3.features\u002F1.index",[46,49,53,58,63,67,71,76,81,86,91,96,101,106],{"title":47,"path":43,"stem":44,"icon":48},"功能总览","i-lucide-layout-grid",{"title":50,"path":51,"stem":52,"icon":39},"快捷键","\u002Fdocs\u002Ffeatures\u002Fshortcuts","1.docs\u002F3.features\u002F10.shortcuts",{"title":54,"path":55,"stem":56,"icon":57},"AI 模型","\u002Fdocs\u002Ffeatures\u002Fai-models","1.docs\u002F3.features\u002F16.ai-models","i-lucide-bot",{"title":59,"path":60,"stem":61,"icon":62},"AI 助手","\u002Fdocs\u002Ffeatures\u002Fai-helper","1.docs\u002F3.features\u002F17.ai-helper","i-lucide-bot-message-square",{"title":64,"path":65,"stem":66,"icon":19},"关于","\u002Fdocs\u002Ffeatures\u002Fabout","1.docs\u002F3.features\u002F19.about",{"title":68,"path":69,"stem":70,"icon":29},"系统命令","\u002Fdocs\u002Ffeatures\u002Fsystem","1.docs\u002F3.features\u002F2.system",{"title":72,"path":73,"stem":74,"icon":75},"调试日志","\u002Fdocs\u002Ffeatures\u002Fdebug","1.docs\u002F3.features\u002F20.debug","i-lucide-terminal",{"title":77,"path":78,"stem":79,"icon":80},"通用设置","\u002Fdocs\u002Ffeatures\u002Fsettings","1.docs\u002F3.features\u002F21.settings","i-mdi-cog-outline",{"title":82,"path":83,"stem":84,"icon":85},"文件资源管理器","\u002Fdocs\u002Ffeatures\u002Ffiles","1.docs\u002F3.features\u002F3.files","i-lucide-folder-tree",{"title":87,"path":88,"stem":89,"icon":90},"文件树","\u002Fdocs\u002Ffeatures\u002Ffiles-tree","1.docs\u002F3.features\u002F4.files-tree","i-lucide-list-tree",{"title":92,"path":93,"stem":94,"icon":95},"文件预览","\u002Fdocs\u002Ffeatures\u002Fpreview","1.docs\u002F3.features\u002F5.preview","i-lucide-eye",{"title":97,"path":98,"stem":99,"icon":100},"本地启动","\u002Fdocs\u002Ffeatures\u002Flocal-launch","1.docs\u002F3.features\u002F6.local-launch","i-lucide-app-window",{"title":102,"path":103,"stem":104,"icon":105},"插件中心","\u002Fdocs\u002Ffeatures\u002Fplugins","1.docs\u002F3.features\u002F7.plugins","i-lucide-puzzle",{"title":107,"path":108,"stem":109,"icon":8},"快速启动","\u002Fdocs\u002Ffeatures\u002Fquick-start","1.docs\u002F3.features\u002F8.quick-start","i-lucide-star",{"title":112,"path":113,"stem":114,"icon":115},"主题","\u002Fdocs\u002Fthemes","1.docs\u002F4.themes","i-lucide-palette",{"title":117,"icon":118,"path":119,"stem":120,"children":121,"page":40},"相关协议","i-lucide-scroll","\u002Fdocs\u002Flegal","1.docs\u002F5.legal",[122,127],{"title":123,"path":124,"stem":125,"icon":126},"用户须知","\u002Fdocs\u002Flegal\u002Fuser-notice","1.docs\u002F5.legal\u002F1.user-notice","i-lucide-file-text",{"title":128,"path":129,"stem":130,"icon":131},"隐私协议","\u002Fdocs\u002Flegal\u002Fprivacy","1.docs\u002F5.legal\u002F2.privacy","i-lucide-shield-check",{"title":133,"icon":134,"path":135,"stem":136,"children":137,"page":40},"开发指南","i-lucide-code","\u002Fdocs\u002Fdevelopment","1.docs\u002F6.development",[138,156,190],{"title":139,"icon":8,"path":140,"stem":141,"children":142,"page":40},"快速开始","\u002Fdocs\u002Fdevelopment\u002Fquick-start","1.docs\u002F6.development\u002F1.quick-start",[143,147,151],{"title":144,"path":145,"stem":146,"icon":19},"介绍","\u002Fdocs\u002Fdevelopment\u002Fquick-start\u002Fintroduction","1.docs\u002F6.development\u002F1.quick-start\u002F1.introduction",{"title":148,"path":149,"stem":150,"icon":34},"快速上手","\u002Fdocs\u002Fdevelopment\u002Fquick-start\u002Fgetting-started","1.docs\u002F6.development\u002F1.quick-start\u002F2.getting-started",{"title":152,"path":153,"stem":154,"icon":155},"常见问题","\u002Fdocs\u002Fdevelopment\u002Fquick-start\u002Ffaq","1.docs\u002F6.development\u002F1.quick-start\u002F3.faq","i-lucide-circle-help",{"title":157,"icon":115,"path":158,"stem":159,"children":160,"page":40},"设计系统","\u002Fdocs\u002Fdevelopment\u002Fdesign-system","1.docs\u002F6.development\u002F2.design-system",[161,166,171,176,181,186],{"title":162,"path":163,"stem":164,"icon":165},"设计令牌","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ftokens","1.docs\u002F6.development\u002F2.design-system\u002F1.tokens","i-lucide-pipette",{"title":167,"path":168,"stem":169,"icon":170},"主题与明暗模式","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ftheming","1.docs\u002F6.development\u002F2.design-system\u002F2.theming","i-lucide-sun-moon",{"title":172,"path":173,"stem":174,"icon":175},"基础样式类","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fbase-styles","1.docs\u002F6.development\u002F2.design-system\u002F3.base-styles","i-lucide-layout-template",{"title":177,"path":178,"stem":179,"icon":180},"图标体系","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ficons","1.docs\u002F6.development\u002F2.design-system\u002F4.icons","i-lucide-shapes",{"title":182,"path":183,"stem":184,"icon":185},"通用组件","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fcomponents","1.docs\u002F6.development\u002F2.design-system\u002F5.components","i-lucide-component",{"title":187,"path":188,"stem":189,"icon":48},"场景组件","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fscene-components","1.docs\u002F6.development\u002F2.design-system\u002F6.scene-components",{"title":191,"icon":57,"path":192,"stem":193,"children":194,"page":40},"AI","\u002Fdocs\u002Fdevelopment\u002Fai","1.docs\u002F6.development\u002F3.ai",[195],{"title":196,"path":197,"stem":198,"icon":126},"LLMs.txt","\u002Fdocs\u002Fdevelopment\u002Fai\u002Fllms-txt","1.docs\u002F6.development\u002F3.ai\u002F1.llms-txt",{"id":200,"title":177,"body":201,"description":1189,"extension":1190,"meta":1191,"navigation":1192,"path":178,"rawbody":1193,"seo":1194,"stem":179,"__hash__":1195},"docs\u002F1.docs\u002F6.development\u002F2.design-system\u002F4.icons.md",{"type":202,"value":203,"toc":1182},"minimark",[204,213,217,233,338,353,356,366,374,383,888,891,971,977,993,996,1003,1089,1108,1111,1133,1148,1152,1165,1178],[205,206,207,208,212],"p",{},"UDhold 插件的图标方案是",[209,210,211],"strong",{},"本地 SVG 图标集 + UnoCSS","：图标文件放在自己工程里、离线可用、构建时内联、颜色自动跟随主题。这一章给出完整配置与用法。",[214,215,216],"h2",{"id":216},"图标跟随主题的原理",[205,218,219,220,224,225,228,229,232],{},"图标加载器会把 SVG 的 ",[221,222,223],"code",{},"fill"," \u002F ",[221,226,227],{},"stroke"," 替换成 ",[221,230,231],{},"currentColor","：",[234,235,240],"pre",{"className":236,"code":237,"language":238,"meta":239,"style":239},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- 你的 SVG：back.svg -->\n\u003Csvg fill=\"#333\" ...>...\u003C\u002Fsvg>\n\n\u003C!-- 渲染结果 -->\n\u003Csvg fill=\"currentColor\" ...>...\u003C\u002Fsvg>\n","html","",[221,241,242,251,296,303,309],{"__ignoreMap":239},[243,244,247],"span",{"class":245,"line":246},"line",1,[243,248,250],{"class":249},"sHwdD","\u003C!-- 你的 SVG：back.svg -->\n",[243,252,254,258,262,266,269,272,276,278,281,284,288,291,293],{"class":245,"line":253},2,[243,255,257],{"class":256},"sMK4o","\u003C",[243,259,261],{"class":260},"swJcz","svg",[243,263,265],{"class":264},"spNyl"," fill",[243,267,268],{"class":256},"=",[243,270,271],{"class":256},"\"",[243,273,275],{"class":274},"sfazB","#333",[243,277,271],{"class":256},[243,279,280],{"class":264}," ...",[243,282,283],{"class":256},">",[243,285,287],{"class":286},"sTEyZ","...",[243,289,290],{"class":256},"\u003C\u002F",[243,292,261],{"class":260},[243,294,295],{"class":256},">\n",[243,297,299],{"class":245,"line":298},3,[243,300,302],{"emptyLinePlaceholder":301},true,"\n",[243,304,306],{"class":245,"line":305},4,[243,307,308],{"class":249},"\u003C!-- 渲染结果 -->\n",[243,310,312,314,316,318,320,322,324,326,328,330,332,334,336],{"class":245,"line":311},5,[243,313,257],{"class":256},[243,315,261],{"class":260},[243,317,265],{"class":264},[243,319,268],{"class":256},[243,321,271],{"class":256},[243,323,231],{"class":274},[243,325,271],{"class":256},[243,327,280],{"class":264},[243,329,283],{"class":256},[243,331,287],{"class":286},[243,333,290],{"class":256},[243,335,261],{"class":260},[243,337,295],{"class":256},[205,339,340,341,344,345,348,349,352],{},"于是图标的颜色 = 所在元素的 ",[221,342,343],{},"color","。文字是 ",[221,346,347],{},"var(--ink)","，图标就是 ",[221,350,351],{},"--ink","；放在主色按钮里就是主色；暗色主题自动反色，零额外代码。",[214,354,355],{"id":355},"工程配置",[205,357,358,361,362,365],{},[209,359,360],{},"第一步","：SVG 图标放进 ",[221,363,364],{},"src\u002Fassets\u002Ficons\u002F","，文件名即图标名：",[234,367,372],{"className":368,"code":370,"language":371},[369],"language-text","src\u002Fassets\u002Ficons\u002F\n├── back.svg\n├── copy.svg\n└── search.svg\n","text",[221,373,370],{"__ignoreMap":239},[205,375,376,232,379,382],{},[209,377,378],{},"第二步",[221,380,381],{},"uno.config.ts"," 注册图标集：",[234,384,388],{"className":385,"code":386,"language":387,"meta":239,"style":239},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineConfig, presetAttributify, presetWind3 } from 'unocss'\nimport presetIcons from '@unocss\u002Fpreset-icons'\nimport { FileSystemIconLoader } from '@iconify\u002Futils\u002Flib\u002Floader\u002Fnode-loaders'\nimport { fileURLToPath, URL } from 'node:url'\nimport transformerDirectives from '@unocss\u002Ftransformer-directives'\n\nexport default defineConfig({\n  presets: [\n    presetWind3(),\n    presetAttributify(),\n    presetIcons({\n      collections: {\n        \u002F\u002F z 图标集：本插件 src\u002Fassets\u002Ficons 目录\n        z: FileSystemIconLoader(\n          fileURLToPath(new URL('.\u002Fsrc\u002Fassets\u002Ficons', import.meta.url)),\n          (svg: any) => {\n            \u002F\u002F fill\u002Fstroke 替换为 currentColor，跟随主题色\n            return svg\n              .replace(\u002F(\u003Csvg.*?fill=)\"(?!none)(.*?)\"\u002F, '$1\"currentColor\"')\n              .replace(\u002F(\u003Csvg.*?stroke=)\"(?!none)(.*?)\"\u002F, '$1\"currentColor\"')\n          }\n        )\n      },\n      extraProperties: { display: 'inline-block', 'vertical-align': 'middle' }\n    })\n  ],\n  transformers: [transformerDirectives()]\n})\n","ts",[221,389,390,428,445,465,490,506,511,529,541,553,563,573,584,590,603,644,667,673,682,740,786,792,798,804,847,855,863,880],{"__ignoreMap":239},[243,391,392,396,399,402,405,408,410,413,416,419,422,425],{"class":245,"line":246},[243,393,395],{"class":394},"s7zQu","import",[243,397,398],{"class":256}," {",[243,400,401],{"class":286}," defineConfig",[243,403,404],{"class":256},",",[243,406,407],{"class":286}," presetAttributify",[243,409,404],{"class":256},[243,411,412],{"class":286}," presetWind3",[243,414,415],{"class":256}," }",[243,417,418],{"class":394}," from",[243,420,421],{"class":256}," '",[243,423,424],{"class":274},"unocss",[243,426,427],{"class":256},"'\n",[243,429,430,432,435,438,440,443],{"class":245,"line":253},[243,431,395],{"class":394},[243,433,434],{"class":286}," presetIcons ",[243,436,437],{"class":394},"from",[243,439,421],{"class":256},[243,441,442],{"class":274},"@unocss\u002Fpreset-icons",[243,444,427],{"class":256},[243,446,447,449,451,454,456,458,460,463],{"class":245,"line":298},[243,448,395],{"class":394},[243,450,398],{"class":256},[243,452,453],{"class":286}," FileSystemIconLoader",[243,455,415],{"class":256},[243,457,418],{"class":394},[243,459,421],{"class":256},[243,461,462],{"class":274},"@iconify\u002Futils\u002Flib\u002Floader\u002Fnode-loaders",[243,464,427],{"class":256},[243,466,467,469,471,474,476,479,481,483,485,488],{"class":245,"line":305},[243,468,395],{"class":394},[243,470,398],{"class":256},[243,472,473],{"class":286}," fileURLToPath",[243,475,404],{"class":256},[243,477,478],{"class":286}," URL",[243,480,415],{"class":256},[243,482,418],{"class":394},[243,484,421],{"class":256},[243,486,487],{"class":274},"node:url",[243,489,427],{"class":256},[243,491,492,494,497,499,501,504],{"class":245,"line":311},[243,493,395],{"class":394},[243,495,496],{"class":286}," transformerDirectives ",[243,498,437],{"class":394},[243,500,421],{"class":256},[243,502,503],{"class":274},"@unocss\u002Ftransformer-directives",[243,505,427],{"class":256},[243,507,509],{"class":245,"line":508},6,[243,510,302],{"emptyLinePlaceholder":301},[243,512,514,517,520,523,526],{"class":245,"line":513},7,[243,515,516],{"class":394},"export",[243,518,519],{"class":394}," default",[243,521,401],{"class":522},"s2Zo4",[243,524,525],{"class":286},"(",[243,527,528],{"class":256},"{\n",[243,530,532,535,538],{"class":245,"line":531},8,[243,533,534],{"class":260},"  presets",[243,536,537],{"class":256},":",[243,539,540],{"class":286}," [\n",[243,542,544,547,550],{"class":245,"line":543},9,[243,545,546],{"class":522},"    presetWind3",[243,548,549],{"class":286},"()",[243,551,552],{"class":256},",\n",[243,554,556,559,561],{"class":245,"line":555},10,[243,557,558],{"class":522},"    presetAttributify",[243,560,549],{"class":286},[243,562,552],{"class":256},[243,564,566,569,571],{"class":245,"line":565},11,[243,567,568],{"class":522},"    presetIcons",[243,570,525],{"class":286},[243,572,528],{"class":256},[243,574,576,579,581],{"class":245,"line":575},12,[243,577,578],{"class":260},"      collections",[243,580,537],{"class":256},[243,582,583],{"class":256}," {\n",[243,585,587],{"class":245,"line":586},13,[243,588,589],{"class":249},"        \u002F\u002F z 图标集：本插件 src\u002Fassets\u002Ficons 目录\n",[243,591,593,596,598,600],{"class":245,"line":592},14,[243,594,595],{"class":260},"        z",[243,597,537],{"class":256},[243,599,453],{"class":522},[243,601,602],{"class":286},"(\n",[243,604,606,609,611,614,616,618,621,624,626,628,631,634,637,639,642],{"class":245,"line":605},15,[243,607,608],{"class":522},"          fileURLToPath",[243,610,525],{"class":286},[243,612,613],{"class":256},"new",[243,615,478],{"class":522},[243,617,525],{"class":286},[243,619,620],{"class":256},"'",[243,622,623],{"class":274},".\u002Fsrc\u002Fassets\u002Ficons",[243,625,620],{"class":256},[243,627,404],{"class":256},[243,629,630],{"class":394}," import",[243,632,633],{"class":256},".",[243,635,636],{"class":286},"meta",[243,638,633],{"class":256},[243,640,641],{"class":286},"url))",[243,643,552],{"class":256},[243,645,647,650,653,655,659,662,665],{"class":245,"line":646},16,[243,648,649],{"class":256},"          (",[243,651,261],{"class":652},"sHdIc",[243,654,537],{"class":256},[243,656,658],{"class":657},"sBMFI"," any",[243,660,661],{"class":256},")",[243,663,664],{"class":264}," =>",[243,666,583],{"class":256},[243,668,670],{"class":245,"line":669},17,[243,671,672],{"class":249},"            \u002F\u002F fill\u002Fstroke 替换为 currentColor，跟随主题色\n",[243,674,676,679],{"class":245,"line":675},18,[243,677,678],{"class":394},"            return",[243,680,681],{"class":286}," svg\n",[243,683,685,688,691,693,696,699,702,705,707,709,712,715,718,720,723,725,728,730,732,735,737],{"class":245,"line":684},19,[243,686,687],{"class":256},"              .",[243,689,690],{"class":522},"replace",[243,692,525],{"class":260},[243,694,695],{"class":256},"\u002F(",[243,697,698],{"class":274},"\u003Csvg.",[243,700,701],{"class":256},"*?",[243,703,704],{"class":274},"fill=",[243,706,661],{"class":256},[243,708,271],{"class":274},[243,710,711],{"class":256},"(?!",[243,713,714],{"class":274},"none",[243,716,717],{"class":256},")(",[243,719,633],{"class":274},[243,721,722],{"class":256},"*?)",[243,724,271],{"class":274},[243,726,727],{"class":256},"\u002F",[243,729,404],{"class":256},[243,731,421],{"class":256},[243,733,734],{"class":274},"$1\"currentColor\"",[243,736,620],{"class":256},[243,738,739],{"class":260},")\n",[243,741,743,745,747,749,751,753,755,758,760,762,764,766,768,770,772,774,776,778,780,782,784],{"class":245,"line":742},20,[243,744,687],{"class":256},[243,746,690],{"class":522},[243,748,525],{"class":260},[243,750,695],{"class":256},[243,752,698],{"class":274},[243,754,701],{"class":256},[243,756,757],{"class":274},"stroke=",[243,759,661],{"class":256},[243,761,271],{"class":274},[243,763,711],{"class":256},[243,765,714],{"class":274},[243,767,717],{"class":256},[243,769,633],{"class":274},[243,771,722],{"class":256},[243,773,271],{"class":274},[243,775,727],{"class":256},[243,777,404],{"class":256},[243,779,421],{"class":256},[243,781,734],{"class":274},[243,783,620],{"class":256},[243,785,739],{"class":260},[243,787,789],{"class":245,"line":788},21,[243,790,791],{"class":256},"          }\n",[243,793,795],{"class":245,"line":794},22,[243,796,797],{"class":286},"        )\n",[243,799,801],{"class":245,"line":800},23,[243,802,803],{"class":256},"      },\n",[243,805,807,810,812,814,817,819,821,824,826,828,830,833,835,837,839,842,844],{"class":245,"line":806},24,[243,808,809],{"class":260},"      extraProperties",[243,811,537],{"class":256},[243,813,398],{"class":256},[243,815,816],{"class":260}," display",[243,818,537],{"class":256},[243,820,421],{"class":256},[243,822,823],{"class":274},"inline-block",[243,825,620],{"class":256},[243,827,404],{"class":256},[243,829,421],{"class":256},[243,831,832],{"class":260},"vertical-align",[243,834,620],{"class":256},[243,836,537],{"class":256},[243,838,421],{"class":256},[243,840,841],{"class":274},"middle",[243,843,620],{"class":256},[243,845,846],{"class":256}," }\n",[243,848,850,853],{"class":245,"line":849},25,[243,851,852],{"class":256},"    }",[243,854,739],{"class":286},[243,856,858,861],{"class":245,"line":857},26,[243,859,860],{"class":286},"  ]",[243,862,552],{"class":256},[243,864,866,869,871,874,877],{"class":245,"line":865},27,[243,867,868],{"class":260},"  transformers",[243,870,537],{"class":256},[243,872,873],{"class":286}," [",[243,875,876],{"class":522},"transformerDirectives",[243,878,879],{"class":286},"()]\n",[243,881,883,886],{"class":245,"line":882},28,[243,884,885],{"class":256},"}",[243,887,739],{"class":286},[205,889,890],{},"预设组合说明：",[892,893,894,907],"table",{},[895,896,897],"thead",{},[898,899,900,904],"tr",{},[901,902,903],"th",{},"预设",[901,905,906],{},"作用",[908,909,910,932,949,959],"tbody",{},[898,911,912,918],{},[913,914,915],"td",{},[221,916,917],{},"presetWind3",[913,919,920,921,924,925,924,928,931],{},"Tailwind 风格原子类（",[221,922,923],{},"flex","、",[221,926,927],{},"p-4",[221,929,930],{},"text-sm","……）",[898,933,934,939],{},[913,935,936],{},[221,937,938],{},"presetAttributify",[913,940,941,942,945,946,948],{},"属性化写法（",[221,943,944],{},"text=\"sm\""," 等价 ",[221,947,930],{},"），按需启用",[898,950,951,956],{},[913,952,953],{},[221,954,955],{},"presetIcons",[913,957,958],{},"图标类支持",[898,960,961,965],{},[913,962,963],{},[221,964,876],{},[913,966,967,968],{},"样式块里可用 ",[221,969,970],{},"@apply",[205,972,973,976],{},[209,974,975],{},"第三步","：入口引入虚拟模块（通常脚手架已带）：",[234,978,980],{"className":385,"code":979,"language":387,"meta":239,"style":239},"import 'virtual:uno.css'\n",[221,981,982],{"__ignoreMap":239},[243,983,984,986,988,991],{"class":245,"line":246},[243,985,395],{"class":394},[243,987,421],{"class":256},[243,989,990],{"class":274},"virtual:uno.css",[243,992,427],{"class":256},[214,994,995],{"id":995},"使用",[205,997,998,999,1002],{},"类名规则：",[221,1000,1001],{},"i-z-{文件名}","，尺寸用原子类控制：",[234,1004,1006],{"className":236,"code":1005,"language":238,"meta":239,"style":239},"\u003Cspan class=\"i-z-copy w-4 h-4\" \u002F>\n\u003Cspan class=\"i-z-search w-5 h-5 text-[var(--ink-2)]\" \u002F>\n\u003Cbutton class=\"icon-btn\">\u003Cspan class=\"i-z-back w-4 h-4\" \u002F>\u003C\u002Fbutton>\n",[221,1007,1008,1029,1048],{"__ignoreMap":239},[243,1009,1010,1012,1014,1017,1019,1021,1024,1026],{"class":245,"line":246},[243,1011,257],{"class":256},[243,1013,243],{"class":260},[243,1015,1016],{"class":264}," class",[243,1018,268],{"class":256},[243,1020,271],{"class":256},[243,1022,1023],{"class":274},"i-z-copy w-4 h-4",[243,1025,271],{"class":256},[243,1027,1028],{"class":256}," \u002F>\n",[243,1030,1031,1033,1035,1037,1039,1041,1044,1046],{"class":245,"line":253},[243,1032,257],{"class":256},[243,1034,243],{"class":260},[243,1036,1016],{"class":264},[243,1038,268],{"class":256},[243,1040,271],{"class":256},[243,1042,1043],{"class":274},"i-z-search w-5 h-5 text-[var(--ink-2)]",[243,1045,271],{"class":256},[243,1047,1028],{"class":256},[243,1049,1050,1052,1055,1057,1059,1061,1064,1066,1069,1071,1073,1075,1077,1080,1082,1085,1087],{"class":245,"line":298},[243,1051,257],{"class":256},[243,1053,1054],{"class":260},"button",[243,1056,1016],{"class":264},[243,1058,268],{"class":256},[243,1060,271],{"class":256},[243,1062,1063],{"class":274},"icon-btn",[243,1065,271],{"class":256},[243,1067,1068],{"class":256},">\u003C",[243,1070,243],{"class":260},[243,1072,1016],{"class":264},[243,1074,268],{"class":256},[243,1076,271],{"class":256},[243,1078,1079],{"class":274},"i-z-back w-4 h-4",[243,1081,271],{"class":256},[243,1083,1084],{"class":256}," \u002F>\u003C\u002F",[243,1086,1054],{"class":260},[243,1088,295],{"class":256},[1090,1091,1093],"callout",{"color":1092,"icon":19},"primary",[205,1094,1095,1096,1099,1100,1103,1104,1107],{},"官方组件库的 ",[221,1097,1098],{},"DetailPanel"," 组件内部使用了 ",[221,1101,1102],{},"i-z-back"," 图标——使用它的插件，自己的图标集里必须包含 ",[221,1105,1106],{},"back.svg","（文件名一致），否则返回按钮不显示。",[214,1109,1110],{"id":1110},"位图图标的自适应",[205,1112,1113,1116,1117,1120,1121,1123,1124,1127,1128,1132],{},[221,1114,1115],{},"logo.png","、第三方服务的图标等",[209,1118,1119],{},"位图","没有 ",[221,1122,231],{}," 可言，暗色主题下深色图标会隐形。这种情况用组件库的 ",[221,1125,1126],{},"AdaptiveIcon"," 组件：它自动分析图片主色，在暗色模式下给深色图标做反色处理。用法见",[1129,1130,182],"a",{"href":1131},".\u002Fcomponents","。",[205,1134,1135,1136,1139,1140,1143,1144,1147],{},"另外，宿主有一套 ",[221,1137,1138],{},"udhold-icon:"," 资源协议用于指令图标；开发态直连 dev server 时需要在 ",[221,1141,1142],{},"vite.config.ts"," 里加 CSP 中间件放行该协议——工程模板（见",[1129,1145,148],{"href":1146},"..\u002Fquick-start\u002Fgetting-started","的 vite 配置）已包含这段配置。",[214,1149,1151],{"id":1150},"插件-logo-规范","插件 logo 规范",[205,1153,1154,1157,1158,1161,1162,1164],{},[221,1155,1156],{},"plugin.json"," 里的 ",[221,1159,1160],{},"logo"," 字段（png \u002F jpg，放插件根目录，与 ",[221,1163,1156],{}," 同级）：",[1166,1167,1168,1172,1175],"ul",{},[1169,1170,1171],"li",{},"建议正方形、透明底、256×256 以上；",[1169,1173,1174],{},"它会出现在搜索结果、活动栏、插件中心、任务栏（分离窗口）等多个位置，过于细长的图会被压变形；",[1169,1176,1177],{},"深色 logo 记得同时准备浅色环境下的表现，或直接用中性色系。",[1179,1180,1181],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":239,"searchDepth":253,"depth":253,"links":1183},[1184,1185,1186,1187,1188],{"id":216,"depth":253,"text":216},{"id":355,"depth":253,"text":355},{"id":995,"depth":253,"text":995},{"id":1110,"depth":253,"text":1110},{"id":1150,"depth":253,"text":1151},"本地 SVG 图标集（z 集合）、UnoCSS 图标配置与图标跟随主题的做法。","md",{},{"icon":180},"---\ntitle: 图标体系\ndescription: 本地 SVG 图标集（z 集合）、UnoCSS 图标配置与图标跟随主题的做法。\nnavigation:\n  icon: i-lucide-shapes\n---\n\nUDhold 插件的图标方案是**本地 SVG 图标集 + UnoCSS**：图标文件放在自己工程里、离线可用、构建时内联、颜色自动跟随主题。这一章给出完整配置与用法。\n\n## 图标跟随主题的原理\n\n图标加载器会把 SVG 的 `fill` \u002F `stroke` 替换成 `currentColor`：\n\n```html\n\u003C!-- 你的 SVG：back.svg -->\n\u003Csvg fill=\"#333\" ...>...\u003C\u002Fsvg>\n\n\u003C!-- 渲染结果 -->\n\u003Csvg fill=\"currentColor\" ...>...\u003C\u002Fsvg>\n```\n\n于是图标的颜色 = 所在元素的 `color`。文字是 `var(--ink)`，图标就是 `--ink`；放在主色按钮里就是主色；暗色主题自动反色，零额外代码。\n\n## 工程配置\n\n**第一步**：SVG 图标放进 `src\u002Fassets\u002Ficons\u002F`，文件名即图标名：\n\n```\nsrc\u002Fassets\u002Ficons\u002F\n├── back.svg\n├── copy.svg\n└── search.svg\n```\n\n**第二步**：`uno.config.ts` 注册图标集：\n\n```ts\nimport { defineConfig, presetAttributify, presetWind3 } from 'unocss'\nimport presetIcons from '@unocss\u002Fpreset-icons'\nimport { FileSystemIconLoader } from '@iconify\u002Futils\u002Flib\u002Floader\u002Fnode-loaders'\nimport { fileURLToPath, URL } from 'node:url'\nimport transformerDirectives from '@unocss\u002Ftransformer-directives'\n\nexport default defineConfig({\n  presets: [\n    presetWind3(),\n    presetAttributify(),\n    presetIcons({\n      collections: {\n        \u002F\u002F z 图标集：本插件 src\u002Fassets\u002Ficons 目录\n        z: FileSystemIconLoader(\n          fileURLToPath(new URL('.\u002Fsrc\u002Fassets\u002Ficons', import.meta.url)),\n          (svg: any) => {\n            \u002F\u002F fill\u002Fstroke 替换为 currentColor，跟随主题色\n            return svg\n              .replace(\u002F(\u003Csvg.*?fill=)\"(?!none)(.*?)\"\u002F, '$1\"currentColor\"')\n              .replace(\u002F(\u003Csvg.*?stroke=)\"(?!none)(.*?)\"\u002F, '$1\"currentColor\"')\n          }\n        )\n      },\n      extraProperties: { display: 'inline-block', 'vertical-align': 'middle' }\n    })\n  ],\n  transformers: [transformerDirectives()]\n})\n```\n\n预设组合说明：\n\n| 预设 | 作用 |\n|------|------|\n| `presetWind3` | Tailwind 风格原子类（`flex`、`p-4`、`text-sm`……） |\n| `presetAttributify` | 属性化写法（`text=\"sm\"` 等价 `text-sm`），按需启用 |\n| `presetIcons` | 图标类支持 |\n| `transformerDirectives` | 样式块里可用 `@apply` |\n\n**第三步**：入口引入虚拟模块（通常脚手架已带）：\n\n```ts\nimport 'virtual:uno.css'\n```\n\n## 使用\n\n类名规则：`i-z-{文件名}`，尺寸用原子类控制：\n\n```html\n\u003Cspan class=\"i-z-copy w-4 h-4\" \u002F>\n\u003Cspan class=\"i-z-search w-5 h-5 text-[var(--ink-2)]\" \u002F>\n\u003Cbutton class=\"icon-btn\">\u003Cspan class=\"i-z-back w-4 h-4\" \u002F>\u003C\u002Fbutton>\n```\n\n::callout{icon=\"i-lucide-info\" color=\"primary\"}\n官方组件库的 `DetailPanel` 组件内部使用了 `i-z-back` 图标——使用它的插件，自己的图标集里必须包含 `back.svg`（文件名一致），否则返回按钮不显示。\n::\n\n## 位图图标的自适应\n\n`logo.png`、第三方服务的图标等**位图**没有 `currentColor` 可言，暗色主题下深色图标会隐形。这种情况用组件库的 `AdaptiveIcon` 组件：它自动分析图片主色，在暗色模式下给深色图标做反色处理。用法见[通用组件](.\u002Fcomponents)。\n\n另外，宿主有一套 `udhold-icon:` 资源协议用于指令图标；开发态直连 dev server 时需要在 `vite.config.ts` 里加 CSP 中间件放行该协议——工程模板（见[快速上手](..\u002Fquick-start\u002Fgetting-started)的 vite 配置）已包含这段配置。\n\n## 插件 logo 规范\n\n`plugin.json` 里的 `logo` 字段（png \u002F jpg，放插件根目录，与 `plugin.json` 同级）：\n\n- 建议正方形、透明底、256×256 以上；\n- 它会出现在搜索结果、活动栏、插件中心、任务栏（分离窗口）等多个位置，过于细长的图会被压变形；\n- 深色 logo 记得同时准备浅色环境下的表现，或直接用中性色系。\n",{"title":177,"description":1189},"OjwXV9MBjMlZVjR9GqLMNHXknK0UdCwdktsuMJ43KOA",[1197,1199],{"title":172,"path":173,"stem":174,"description":1198,"icon":175},"开箱即用的按钮、输入框、开关、卡片样式类，引一个 CSS 文件就有全套控件底子。",{"title":182,"path":183,"stem":184,"description":1200,"icon":185},"@udhold\u002Fudhold-ui 通用组件参考：消息提示、确认弹窗、下拉框、快捷键录制、滑杆、详情面板与自适应图标。",1793010253455]