[{"data":1,"prerenderedAt":349},["ShallowReactive",2],{"content-\u002Fcomponents\u002Ficons":3,"content-en-fallback-\u002Fcomponents\u002Ficons":348},{"id":4,"title":5,"body":6,"description":340,"extension":341,"meta":342,"nav":343,"navigation":60,"path":344,"seo":345,"stem":346,"__hash__":347},"content\u002Fcomponents\u002Ficons.md","Icons 图标库",{"type":7,"value":8,"toc":335},"minimark",[9,13,22,26,103,106,109,112,116,123,183,192,275,332],[10,11,5],"h1",{"id":12},"icons-图标库",[14,15,16,17,21],"p",{},"WinUI 3 \u002F Fluent System Icons 的 Vue3 图标组件，生成自官方开源包 ",[18,19,20],"code",{},"@fluentui\u002Fsvg-icons","\n（MIT，即 Segoe Fluent Icons 字体的矢量源）。共 2953 个图标名 × 10 \u002F 12 \u002F 16 \u002F 20 \u002F 24 \u002F 28 \u002F 32 \u002F 48 尺寸 × regular \u002F filled 风格。",[23,24,25],"h2",{"id":25},"用法",[27,28,29,36],"demo-block",{"title":25},[30,31,33],"template",{"v-slot:preview":32},"",[34,35],"icons-usage-demo",{},[30,37,38],{"v-slot:code":32},[39,40,44],"pre",{"className":41,"code":42,"language":43,"meta":32,"style":32},"language-vue shiki shiki-themes github-light github-dark","import { FluentIconAdd20Filled } from '@fluere-vue\u002Ficons'\n\n\u003CFluentIconAdd20Filled \u002F>\n\u003CFluentIconAdd20Filled size=\"24\" title=\"添加\" \u002F>\n","vue",[18,45,46,55,62,75],{"__ignoreMap":32},[47,48,51],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sVt8B","import { FluentIconAdd20Filled } from '@fluere-vue\u002Ficons'\n",[47,56,58],{"class":49,"line":57},2,[47,59,61],{"emptyLinePlaceholder":60},true,"\n",[47,63,65,68,72],{"class":49,"line":64},3,[47,66,67],{"class":53},"\u003C",[47,69,71],{"class":70},"s9eBZ","FluentIconAdd20Filled",[47,73,74],{"class":53}," \u002F>\n",[47,76,78,80,82,86,89,93,96,98,101],{"class":49,"line":77},4,[47,79,67],{"class":53},[47,81,71],{"class":70},[47,83,85],{"class":84},"sScJk"," size",[47,87,88],{"class":53},"=",[47,90,92],{"class":91},"sZZnC","\"24\"",[47,94,95],{"class":84}," title",[47,97,88],{"class":53},[47,99,100],{"class":91},"\"添加\"",[47,102,74],{"class":53},[23,104,105],{"id":105},"图标浏览器",[14,107,108],{},"支持按图标名搜索、按尺寸与风格筛选，点击任意图标复制组件名。",[110,111],"icons-browser-demo",{},[23,113,115],{"id":114},"api","API",[14,117,118,119,122],{},"每个图标都是一个独立组件，导出名规则为 ",[18,120,121],{},"FluentIcon{Name}{Size}{Style}","：",[124,125,126,141,171],"ul",{},[127,128,129,132,133,136,137,140],"li",{},[18,130,131],{},"{Name}","：图标名转 PascalCase，如 ",[18,134,135],{},"accessibility_checkmark"," → ",[18,138,139],{},"AccessibilityCheckmark","；",[127,142,143,122,146,149,150,149,153,149,156,149,159,149,162,149,165,149,168,140],{},[18,144,145],{},"{Size}",[18,147,148],{},"10"," \u002F ",[18,151,152],{},"12",[18,154,155],{},"16",[18,157,158],{},"20",[18,160,161],{},"24",[18,163,164],{},"28",[18,166,167],{},"32",[18,169,170],{},"48",[127,172,173,122,176,149,179,182],{},[18,174,175],{},"{Style}",[18,177,178],{},"Regular",[18,180,181],{},"Filled","。",[14,184,185,186,188,189,182],{},"例：",[18,187,71],{},"、",[18,190,191],{},"FluentIconAccessibilityCheckmark24Regular",[193,194,195,214],"table",{},[196,197,198],"thead",{},[199,200,201,205,208,211],"tr",{},[202,203,204],"th",{},"属性（Props）",[202,206,207],{},"类型",[202,209,210],{},"默认",[202,212,213],{},"说明",[215,216,217,239],"tbody",{},[199,218,219,225,230,233],{},[220,221,222],"td",{},[18,223,224],{},"size",[220,226,227],{},[18,228,229],{},"number | string",[220,231,232],{},"图标原生设计尺寸",[220,234,235,236,238],{},"渲染尺寸（px）。默认取该图标的原生尺寸（如 ",[18,237,71],{}," 为 20）；放大建议按 2 的倍数避免模糊",[199,240,241,246,251,256],{},[220,242,243],{},[18,244,245],{},"title",[220,247,248],{},[18,249,250],{},"string",[220,252,253],{},[18,254,255],{},"—",[220,257,258,259,262,263,266,267,270,271,274],{},"无障碍标题；提供后渲染 ",[18,260,261],{},"\u003Ctitle>"," 并把 ",[18,264,265],{},"role"," 置为 ",[18,268,269],{},"img","，否则图标按装饰元素处理（",[18,272,273],{},"aria-hidden=\"true\"","）",[276,277,278,311],"blockquote",{},[14,279,280,284,285,288,289,149,292,149,295,149,298,301,302,304,305,307,308,182],{},[281,282,283],"strong",{},"attrs 透传","：所有未声明的属性与事件都会落到根 ",[18,286,287],{},"\u003Csvg>"," 上，因此 ",[18,290,291],{},"class",[18,293,294],{},"style",[18,296,297],{},"aria-label",[18,299,300],{},"@click"," 可直接按原生 SVG 用法传入。",[18,303,297],{}," 与 ",[18,306,245],{}," 具有同等效果——任一个存在即视为「有可访问名」，此时不再设置 ",[18,309,310],{},"aria-hidden",[14,312,313,122,316,319,320,323,324,327,328,331],{},[281,314,315],{},"配色随文本",[18,317,318],{},"fill=\"currentColor\"","，图标颜色始终等于当前文本色，因此明暗主题与 ",[18,321,322],{},"colorNeutralForeground*"," 等语义色都自动生效，无需为图标单独指定颜色。根节点另带 ",[18,325,326],{},"focusable=\"false\"","（避免 IE\u002F旧 Edge 的 Tab 焦点）与 ",[18,329,330],{},"data-icon-name","（原始图标名，便于测试与调试）。",[294,333,334],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}",{"title":32,"searchDepth":57,"depth":57,"links":336},[337,338,339],{"id":25,"depth":57,"text":25},{"id":105,"depth":57,"text":105},{"id":114,"depth":57,"text":115},"WinUI 3 \u002F Fluent System Icons 的 Vue3 图标组件。","md",{},{"title":5},"\u002Fcomponents\u002Ficons",{"title":5,"description":340},"components\u002Ficons","b6Jnh6928GEj8kTdkSFmfr3TdaKOk7I50nU-z2oULrU",null,1791802960540]