<UserControl
    x:Class="Semi.Avalonia.Demo.Pages.PathIconDemo"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <StackPanel HorizontalAlignment="Left">
        <StackPanel Orientation="Horizontal">
            <StackPanel.Styles>
                <Style Selector="PathIcon">
                    <Setter Property="Theme" Value="{DynamicResource InnerPathIcon}" />
                    <Setter Property="Data" Value="{StaticResource SemiIconSearch}" />
                </Style>
            </StackPanel.Styles>
            <PathIcon Classes="ExtraSmall" />
            <PathIcon Classes="Small" />
            <PathIcon />
            <PathIcon Classes="Large" />
            <PathIcon Classes="ExtraLarge" />
        </StackPanel>

        <TextBlock Text="Size" />
        <Slider Name="width" Minimum="0" Maximum="100" Value="20" Width="300" />
        <ToggleSwitch Name="active" Content="Active" />
        <PathIcon
            Classes.Active="{Binding #active.IsChecked}"
            Width="{Binding #width.Value}"
            Height="{Binding #width.Value}"
            Foreground="{DynamicResource SemiBlue6}"
            BorderBrush="{DynamicResource SemiRed6}"
            Data="{StaticResource SemiIconHome}" />
    </StackPanel>
</UserControl>