1+ @page " /IconPage"
2+ @using System .ComponentModel .DataAnnotations
3+ @using System .Text .RegularExpressions
4+ @using Microsoft .Fast .Components .FluentUI
5+
6+ <style >
7+ .preview {
8+ margin 10px ;
9+ --card-width : 120px ;
10+ --card-height : 120px ;
11+ --elevation : 6 ;
12+ }
13+
14+ .preview :hover {
15+ --elevation : 12 ;
16+ }
17+
18+ .preview .inner {
19+ text-align center ;
20+ padding 10px 10px 0 ;
21+ color var (--neutral-foreground-rest );
22+ }
23+
24+ .preview .inner svg {
25+ height 80px ;
26+ }
27+
28+ .label {
29+ text-align center ;
30+ padding 2px 5px ;
31+ font-size 10px ;
32+ font-family monospace ;
33+ white-space nowrap ;
34+ overflow hidden ;
35+ background var (--neutral-stroke-rest );
36+ }
37+ style >
38+
39+ <h1 >Icons</h1 >
40+ <h2 >Overview</h2 >
41+ <p >
42+ <dl >
43+ <dt >Icon using 'accent-fill-rest' color:<br />
44+ <code >< ; FluentIcon Name=@@FluentIcons.Accessibility Size=IconSize.Size32 Filled=true /> ; </code ></dt >
45+ <dd ><FluentIcon Name =@FluentIcons.Accessibility Size =IconSize.Size32 Filled =true /></dd >
46+ <dt >Icon without accent color: <br />
47+ <code >< ; FluentIcon Name=@@FluentIcons.AccessibilityCheckmark Size=IconSize.Size24 Filled=true UseAccentColor=false /> ; </code ></dt >
48+ <dd ><FluentIcon Name =@FluentIcons.AccessibilityCheckmark Size =IconSize.Size24 Filled =true UseAccentColor =false /></dd >
49+ </dl >
50+
51+
52+ </p >
53+ <h2 >Culture Aware</h2 >
54+ <p >
55+ Some icons offer alternatives for specific languages (neutral cultures). You can specify a language to use for the icon by using the <code >NeutralCultureName</code > parameter and giving it the two letter ISO code of the culture.
56+ If a language version of an icon is not found, the original neutral version will be used.
57+ <dl >
58+ <dt >Neutral @@FluentIcons.TextBold icons</dt >
59+ <dd style =" line-height 30px ; display flex ; align-items center ; margin 10px 40px ;" FluentIcon Name =@FluentIcons.TextBold Size =IconSize.Size24 Filled =true /> Regular: <FluentIcon Name =@FluentIcons.TextBold Size =IconSize.Size24 Filled =false /></dd >
60+ <dt >French @@FluentIcons.TextBold icons (<code >NeutralCultureName="fr"</code >)</dt >
61+ <dd style =" line-height 30px ; display flex ; align-items center ; margin 10px 40px ;" FluentIcon Name =@FluentIcons.TextBold Size =IconSize.Size24 Filled =true NeutralCultureName =" fr" FluentIcon Name =@FluentIcons.TextBold Size =IconSize.Size24 Filled =false NeutralCultureName =" fr" dd >
62+ <dt >German @@FluentIcons.TextBold icons (<code >NeutralCultureName="de"</code >)</dt >
63+ <dd style =" line-height 30px ; display flex ; align-items center ; margin 10px 40px ;" FluentIcon Name =@FluentIcons.TextBold Size =IconSize.Size24 Filled =true NeutralCultureName =" de" FluentIcon Name =@FluentIcons.TextBold Size =IconSize.Size24 Filled =false NeutralCultureName =" de" dd >
64+ <dt >Greek @@FluentIcons.TextBold icons (<code >NeutralCultureName="el"</code >) (does not exist, fall back to original)</dt >
65+ <dd style =" line-height 30px ; display flex ; align-items center ; margin 10px 40px ;" FluentIcon Name =@FluentIcons.TextBold Size =IconSize.Size24 Filled =true NeutralCultureName =" el" FluentIcon Name =@FluentIcons.TextBold Size =IconSize.Size24 Filled =false NeutralCultureName =" el" dd >
66+ <dt >Spanish @@FluentIcons.TextBold icons (<code >NeutralCultureName="es"</code >)</dt >
67+ <dd style =" line-height 30px ; display flex ; align-items center ; margin 10px 40px ;" FluentIcon Name =@FluentIcons.TextBold Size =IconSize.Size24 Filled =true NeutralCultureName =" es" FluentIcon Name =@FluentIcons.TextBold Size =IconSize.Size24 Filled =false NeutralCultureName =" es" dd >
68+ </dl >
69+ </p >
70+ <h2 >Explore Icons</h2 >
71+ <p >
72+ <EditForm EditContext =" @editContext"
73+ <div style =" display flex ; flex-wrap wrap ; width 90% ;height 100px ;align-items center ;justify-content space-between ;"
74+ <div style =" display flex ;align-content center ;align-items center ;"
75+ <p style =" padding-right 10px ;" label for =" Searchterm" label ></p >
76+ <FluentTextField Name =" Searchterm" @bind-Value =" Form.Searchterm" Placeholder =" Search.." FluentTextField >
77+ </div >
78+ <div style =" display flex ;align-content center ;align-items center ;"
79+ <p style =" padding-right 10px ;" label for =" Size" label ></p >
80+ <FluentSelect TValue =" IconSize" Name =" Size" @bind-Value =" Form.Size" @onchange =" @(x => HandleSize(x))"
81+ @foreach ( IconSize size in Enum .GetValues <IconSize >())
82+ {
83+ <FluentOption Value =@size >@( (int )size ) </FluentOption >
84+ }
85+ </FluentSelect >
86+ </div >
87+
88+ <div style =" display flex ;align-content center ;align-items center ;"
89+ <FluentCheckbox @bind-Value =" Form.Filled" @onclick =" HandleStyle" FluentCheckbox >
90+ <FluentCheckbox @bind-Value =" Form.Regular" @onclick =" HandleStyle" FluentCheckbox >
91+ </div >
92+ <FluentButton @onclick =" HandleSearch" FluentIcon Name =" @FluentIcons.Search" Size =" @IconSize.Size16" Filled =false Slot =" start" FluentIcon > Search</FluentButton >
93+ </div >
94+ </EditForm >
95+ </p >
96+ <div id =" filled" data-is-scrollable =" true" style =" overflow-y auto ;height 600px ;"
97+ <div style =" display flex ;flex-flow row wrap ;"
98+ @foreach ( IconModel icon in icons )
99+ {
100+ <FluentCard class =" preview"
101+ <div class =" inner"
102+ <FluentIcon Name =@icon.Name Size =@icon.Size Filled =@icon.Filled />
103+ </div >
104+ <div class =" label" @icon.Name </div >
105+ </FluentCard >
106+ }
107+ @if (icons .Count == 0 )
108+ {
109+ <div style =" display flex ;align-content center ;align-items center ;"
110+ <p style =" padding-right 10px ;" No icons found </p >
111+ </div >
112+ }
113+ </div >
114+ </div >
115+
116+ @code {
117+ private EditContext ? editContext ;
118+
119+ List <IconModel > icons = new ();
120+
121+ public void HandleStyle ()
122+ {
123+ if (Form .Filled && Form .Regular || ! Form .Filled && ! Form .Regular )
124+ {
125+ Form .Style = null ;
126+ }
127+ else if (Form .Filled && ! Form .Regular )
128+ {
129+ Form .Style = true ;
130+ }
131+ else if (! Form .Filled && Form .Regular )
132+ {
133+ Form .Style = false ;
134+ }
135+ HandleSearch ();
136+ }
137+
138+ public void HandleSize (ChangeEventArgs args )
139+ {
140+ if (! string .IsNullOrEmpty (args .Value ? .ToString ()))
141+ {
142+ Form .Size = Enum .Parse <IconSize >((string )args .Value );
143+ HandleSearch ();
144+ }
145+
146+ HandleSearch ();
147+ }
148+
149+ public void HandleSearchterm ()
150+ {
151+ HandleSearch ();
152+ }
153+
154+ public void HandleSearch ()
155+ {
156+ if (Form .Searchterm is not null && Form .Searchterm .Trim ().Length > 2 )
157+ {
158+ icons = FluentIcons .GetFilteredIcons (searchterm : Form .Searchterm .Trim (), size : Form .Size , filled : Form .Style );
159+ }
160+ StateHasChanged ();
161+ return ;
162+ }
163+
164+ public class FormModel
165+ {
166+ public IconSize Size { get ; set ; }
167+
168+ public string ? Searchterm { get ; set ; }
169+
170+ public bool ? Style { get ; set ; }
171+
172+ public bool Filled { get ; set ; }
173+
174+ public bool Regular { get ; set ; }
175+
176+ }
177+
178+ private FormModel Form = new ()
179+ {
180+ Size = IconSize .Size24 ,
181+ Searchterm = " "
182+ Style = null ,
183+ };
184+
185+ protected override void OnInitialized ()
186+ {
187+ editContext = new EditContext (Form );
188+ }
189+ }
0 commit comments