[{"data":1,"prerenderedAt":611},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Ficons":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Ficons":352},{"id":4,"title":5,"body":6,"description":344,"extension":345,"meta":346,"nav":347,"navigation":61,"path":348,"seo":349,"stem":350,"__hash__":351},"content_en\u002Fen\u002Fcomponents\u002Ficons.md","Icons",{"type":7,"value":8,"toc":339},"minimark",[9,13,22,27,104,108,111,114,118,125,186,195,278,336],[10,11,5],"h1",{"id":12},"icons",[14,15,16,17,21],"p",{},"Vue 3 icon components for WinUI 3 \u002F Fluent System Icons, generated from the official open-source package ",[18,19,20],"code",{},"@fluentui\u002Fsvg-icons","\n(MIT, i.e. the vector source of the Segoe Fluent Icons font). A total of 2953 icon names × 10 \u002F 12 \u002F 16 \u002F 20 \u002F 24 \u002F 28 \u002F 32 \u002F 48 sizes × regular \u002F filled styles.",[23,24,26],"h2",{"id":25},"usage","Usage",[28,29,30,37],"demo-block",{"title":26},[31,32,34],"template",{"v-slot:preview":33},"",[35,36],"icons-usage-demo",{},[31,38,39],{"v-slot:code":33},[40,41,45],"pre",{"className":42,"code":43,"language":44,"meta":33,"style":33},"language-vue shiki shiki-themes github-light github-dark","import { FluentIconAdd20Filled } from '@fluere-vue\u002Ficons'\n\n\u003CFluentIconAdd20Filled \u002F>\n\u003CFluentIconAdd20Filled size=\"24\" title=\"Add\" \u002F>\n","vue",[18,46,47,56,63,76],{"__ignoreMap":33},[48,49,52],"span",{"class":50,"line":51},"line",1,[48,53,55],{"class":54},"sVt8B","import { FluentIconAdd20Filled } from '@fluere-vue\u002Ficons'\n",[48,57,59],{"class":50,"line":58},2,[48,60,62],{"emptyLinePlaceholder":61},true,"\n",[48,64,66,69,73],{"class":50,"line":65},3,[48,67,68],{"class":54},"\u003C",[48,70,72],{"class":71},"s9eBZ","FluentIconAdd20Filled",[48,74,75],{"class":54}," \u002F>\n",[48,77,79,81,83,87,90,94,97,99,102],{"class":50,"line":78},4,[48,80,68],{"class":54},[48,82,72],{"class":71},[48,84,86],{"class":85},"sScJk"," size",[48,88,89],{"class":54},"=",[48,91,93],{"class":92},"sZZnC","\"24\"",[48,95,96],{"class":85}," title",[48,98,89],{"class":54},[48,100,101],{"class":92},"\"Add\"",[48,103,75],{"class":54},[23,105,107],{"id":106},"icon-browser","Icon browser",[14,109,110],{},"Search by icon name, filter by size and style, and click any icon to copy its component name.",[112,113],"icons-browser-demo",{},[23,115,117],{"id":116},"api","API",[14,119,120,121,124],{},"Each icon is an independent component, and the export name follows the rule ",[18,122,123],{},"FluentIcon{Name}{Size}{Style}",":",[126,127,128,143,174],"ul",{},[129,130,131,134,135,138,139,142],"li",{},[18,132,133],{},"{Name}",": the icon name converted to PascalCase, e.g. ",[18,136,137],{},"accessibility_checkmark"," → ",[18,140,141],{},"AccessibilityCheckmark",";",[129,144,145,148,149,152,153,152,156,152,159,152,162,152,165,152,168,152,171,142],{},[18,146,147],{},"{Size}",": ",[18,150,151],{},"10"," \u002F ",[18,154,155],{},"12",[18,157,158],{},"16",[18,160,161],{},"20",[18,163,164],{},"24",[18,166,167],{},"28",[18,169,170],{},"32",[18,172,173],{},"48",[129,175,176,148,179,152,182,185],{},[18,177,178],{},"{Style}",[18,180,181],{},"Regular",[18,183,184],{},"Filled",".",[14,187,188,189,191,192,185],{},"Examples: ",[18,190,72],{},", ",[18,193,194],{},"FluentIconAccessibilityCheckmark24Regular",[196,197,198,217],"table",{},[199,200,201],"thead",{},[202,203,204,208,211,214],"tr",{},[205,206,207],"th",{},"Prop (Props)",[205,209,210],{},"Type",[205,212,213],{},"Default",[205,215,216],{},"Description",[218,219,220,242],"tbody",{},[202,221,222,228,233,236],{},[223,224,225],"td",{},[18,226,227],{},"size",[223,229,230],{},[18,231,232],{},"number | string",[223,234,235],{},"Native design size",[223,237,238,239,241],{},"Rendered size (px). Defaults to the icon's native size (e.g. 20 for ",[18,240,72],{},"); when enlarging, use multiples of 2 to avoid blurriness",[202,243,244,249,254,259],{},[223,245,246],{},[18,247,248],{},"title",[223,250,251],{},[18,252,253],{},"string",[223,255,256],{},[18,257,258],{},"—",[223,260,261,262,265,266,269,270,273,274,277],{},"Accessibility title; when provided it renders a ",[18,263,264],{},"\u003Ctitle>"," and sets ",[18,267,268],{},"role"," to ",[18,271,272],{},"img",", otherwise the icon is treated as decorative (",[18,275,276],{},"aria-hidden=\"true\"",")",[279,280,281,315],"blockquote",{},[14,282,283,287,288,291,292,152,295,152,298,152,301,304,305,307,308,310,311,314],{},[284,285,286],"strong",{},"attrs passthrough",": all undeclared attributes and events fall through to the root ",[18,289,290],{},"\u003Csvg>",", so ",[18,293,294],{},"class",[18,296,297],{},"style",[18,299,300],{},"aria-label",[18,302,303],{},"@click"," can be passed directly as with a native SVG. ",[18,306,300],{}," and ",[18,309,248],{}," have the same effect — if either is present the icon is considered to have an accessible name, and ",[18,312,313],{},"aria-hidden"," is no longer set.",[14,316,317,148,320,323,324,327,328,331,332,335],{},[284,318,319],{},"Colors follow the text",[18,321,322],{},"fill=\"currentColor\"",", so the icon color always equals the current text color; light\u002Fdark themes and semantic colors such as ",[18,325,326],{},"colorNeutralForeground*"," automatically take effect with no need to specify a color for the icon. The root node also carries ",[18,329,330],{},"focusable=\"false\""," (to avoid Tab focus in IE \u002F legacy Edge) and ",[18,333,334],{},"data-icon-name"," (the original icon name, useful for testing and debugging).",[297,337,338],{},"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":33,"searchDepth":58,"depth":58,"links":340},[341,342,343],{"id":25,"depth":58,"text":26},{"id":106,"depth":58,"text":107},{"id":116,"depth":58,"text":117},"Vue 3 icon components for WinUI 3 \u002F Fluent System Icons.","md",{},{"title":5},"\u002Fen\u002Fcomponents\u002Ficons",{"title":5,"description":344},"en\u002Fcomponents\u002Ficons","VYE4Cnz1Gp919BZLTmu7NNI-CsesM4uN_Jwvg7XmKVY",{"id":353,"title":354,"body":355,"description":604,"extension":345,"meta":605,"nav":606,"navigation":61,"path":607,"seo":608,"stem":609,"__hash__":610},"content\u002Fcomponents\u002Ficons.md","Icons 图标库",{"type":7,"value":356,"toc":599},[357,360,366,369,419,422,425,427,429,435,476,484,552,597],[10,358,354],{"id":359},"icons-图标库",[14,361,362,363,365],{},"WinUI 3 \u002F Fluent System Icons 的 Vue3 图标组件，生成自官方开源包 ",[18,364,20],{},"\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,367,368],{"id":368},"用法",[28,370,371,375],{"title":368},[31,372,373],{"v-slot:preview":33},[35,374],{},[31,376,377],{"v-slot:code":33},[40,378,380],{"className":42,"code":379,"language":44,"meta":33,"style":33},"import { FluentIconAdd20Filled } from '@fluere-vue\u002Ficons'\n\n\u003CFluentIconAdd20Filled \u002F>\n\u003CFluentIconAdd20Filled size=\"24\" title=\"添加\" \u002F>\n",[18,381,382,386,390,398],{"__ignoreMap":33},[48,383,384],{"class":50,"line":51},[48,385,55],{"class":54},[48,387,388],{"class":50,"line":58},[48,389,62],{"emptyLinePlaceholder":61},[48,391,392,394,396],{"class":50,"line":65},[48,393,68],{"class":54},[48,395,72],{"class":71},[48,397,75],{"class":54},[48,399,400,402,404,406,408,410,412,414,417],{"class":50,"line":78},[48,401,68],{"class":54},[48,403,72],{"class":71},[48,405,86],{"class":85},[48,407,89],{"class":54},[48,409,93],{"class":92},[48,411,96],{"class":85},[48,413,89],{"class":54},[48,415,416],{"class":92},"\"添加\"",[48,418,75],{"class":54},[23,420,421],{"id":421},"图标浏览器",[14,423,424],{},"支持按图标名搜索、按尺寸与风格筛选，点击任意图标复制组件名。",[112,426],{},[23,428,117],{"id":116},[14,430,431,432,434],{},"每个图标都是一个独立组件，导出名规则为 ",[18,433,123],{},"：",[126,436,437,447,467],{},[129,438,439,441,442,138,444,446],{},[18,440,133],{},"：图标名转 PascalCase，如 ",[18,443,137],{},[18,445,141],{},"；",[129,448,449,434,451,152,453,152,455,152,457,152,459,152,461,152,463,152,465,446],{},[18,450,147],{},[18,452,151],{},[18,454,155],{},[18,456,158],{},[18,458,161],{},[18,460,164],{},[18,462,167],{},[18,464,170],{},[18,466,173],{},[129,468,469,434,471,152,473,475],{},[18,470,178],{},[18,472,181],{},[18,474,184],{},"。",[14,477,478,479,481,482,475],{},"例：",[18,480,72],{},"、",[18,483,194],{},[196,485,486,502],{},[199,487,488],{},[202,489,490,493,496,499],{},[205,491,492],{},"属性（Props）",[205,494,495],{},"类型",[205,497,498],{},"默认",[205,500,501],{},"说明",[218,503,504,523],{},[202,505,506,510,514,517],{},[223,507,508],{},[18,509,227],{},[223,511,512],{},[18,513,232],{},[223,515,516],{},"图标原生设计尺寸",[223,518,519,520,522],{},"渲染尺寸（px）。默认取该图标的原生尺寸（如 ",[18,521,72],{}," 为 20）；放大建议按 2 的倍数避免模糊",[202,524,525,529,533,537],{},[223,526,527],{},[18,528,248],{},[223,530,531],{},[18,532,253],{},[223,534,535],{},[18,536,258],{},[223,538,539,540,542,543,545,546,548,549,551],{},"无障碍标题；提供后渲染 ",[18,541,264],{}," 并把 ",[18,544,268],{}," 置为 ",[18,547,272],{},"，否则图标按装饰元素处理（",[18,550,276],{},"）",[279,553,554,580],{},[14,555,556,559,560,562,563,152,565,152,567,152,569,571,572,574,575,577,578,475],{},[284,557,558],{},"attrs 透传","：所有未声明的属性与事件都会落到根 ",[18,561,290],{}," 上，因此 ",[18,564,294],{},[18,566,297],{},[18,568,300],{},[18,570,303],{}," 可直接按原生 SVG 用法传入。",[18,573,300],{}," 与 ",[18,576,248],{}," 具有同等效果——任一个存在即视为「有可访问名」，此时不再设置 ",[18,579,313],{},[14,581,582,434,585,587,588,590,591,593,594,596],{},[284,583,584],{},"配色随文本",[18,586,322],{},"，图标颜色始终等于当前文本色，因此明暗主题与 ",[18,589,326],{}," 等语义色都自动生效，无需为图标单独指定颜色。根节点另带 ",[18,592,330],{},"（避免 IE\u002F旧 Edge 的 Tab 焦点）与 ",[18,595,334],{},"（原始图标名，便于测试与调试）。",[297,598,338],{},{"title":33,"searchDepth":58,"depth":58,"links":600},[601,602,603],{"id":368,"depth":58,"text":368},{"id":421,"depth":58,"text":421},{"id":116,"depth":58,"text":117},"WinUI 3 \u002F Fluent System Icons 的 Vue3 图标组件。",{},{"title":354},"\u002Fcomponents\u002Ficons",{"title":354,"description":604},"components\u002Ficons","b6Jnh6928GEj8kTdkSFmfr3TdaKOk7I50nU-z2oULrU",1792150929158]