Icon
An icon drawn by name, as uikit:Icon.
ExampleInteractive
Live demo unavailable
<StackPanel Spacing="16" HorizontalAlignment="Left">
<WrapPanel ItemSpacing="12" LineSpacing="12">
<uikit:Icon Kind="Info" />
<uikit:Icon Kind="Map" />
<uikit:Icon Kind="Bot" />
<uikit:Icon Kind="Github" />
<uikit:Icon Kind="Calendar" />
<uikit:Icon Kind="Globe" />
<uikit:Icon Kind="Heart" />
<uikit:Icon Kind="Settings" />
<uikit:Icon Kind="Palette" />
</WrapPanel>
<WrapPanel ItemSpacing="12" LineSpacing="12">
<uikit:Icon Classes="large" Kind="Maximize" Foreground="{DynamicResource UIKit.Green}" />
<uikit:Icon Classes="large" Kind="Minimize" Foreground="{DynamicResource UIKit.Red}" />
<uikit:Icon Classes="large" Kind="SortAscending" />
<Button Classes="ghost small icon-only">
<uikit:Icon Kind="Heart" />
</Button>
<Button Classes="outline">
<StackPanel Orientation="Horizontal" Spacing="8">
<uikit:Icon Kind="Search" />
<TextBlock Text="Search" />
</StackPanel>
</Button>
</WrapPanel>
</StackPanel>Usage
uikit:Icon draws an icon by name: Kind is one of the IconName values, the icons GPUI Kit ships for its components (listed in Icons). It is a PathIcon, so the size classes of the Icon, Foreground, and the sizes buttons and menus give their icons apply to it the same way. IconNames.ResourceKey gives an icon's geometry resource for code.
Examples
Every IconName; point at an icon for its name.
Live demo unavailable
<ItemsControl Width="560" HorizontalAlignment="Left" ItemsSource="{x:Static local:IconSamples.All}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel ItemSpacing="4" LineSpacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="uikit:IconName">
<Border Width="36" Height="36" CornerRadius="6" Background="Transparent" ToolTip.Tip="{Binding}">
<uikit:Icon Kind="{Binding}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>