davidxuang / FluentIcons

A multi-framework wrapper of https://github.com/microsoft/fluentui-system-icons
MIT License
72 stars 6 forks source link

Can I use these icons with FluentAvalonia #1

Closed masterWeber closed 1 year ago

masterWeber commented 1 year ago

Can I use these icons with FluentAvalonia, for example for NavigationViewItem? https://github.com/amwx/FluentAvalonia

davidxuang commented 1 year ago

No, as for FluentIcons.Avalonia. As a workaround, I’ve just released a new package FluentIcons.FluentAvalonia where SymbolIcon is built upon FontIcon from FluentAvalonia. It should work with all FluentAvalonia v1.3.0+ controls since the FontIcon APIs haven’t change since then, but I haven’t tested it for v2 yet. So please leave some feedback whether it works on v2 or not.

Please note that for now, only preview versions works for FluentAvalonia v2.

masterWeber commented 1 year ago

Please note that for now, only preview versions works for FluentAvalonia v2.

Not buildable for v2, because avalonia v11 is used there.

Unhandled exception. System.IO.FileNotFoundException: Could not load file or assembly 'Avalonia.Visuals, Version=0.10.13.0, Culture=neutral, PublicKeyToken=c8d484a7012f9a8b'. The system cannot find the file specified.

davidxuang commented 1 year ago

Use the version with preview suffix. Latest is 1.1.182-preview.

图片

masterWeber commented 1 year ago

Great! Thank you so much!

NPadrutt commented 1 year ago

I just stumbled over this question. I'm currently try to achieve this aswell. I declared it like this and it starts, but the icon isn't shown. It's just empty. Any idea what I'm doing wrong?

    <ui:NavigationView x:Name="NavigationView"
                       ItemInvoked="NavigationView_OnItemInvoked"
                       IsBackButtonVisible="True"
                       IsBackEnabled="{Binding CanGoBack, Mode=OneWay}"
                       BackRequested="NavigationView_OnBackRequested">
        <ui:NavigationView.MenuItems>
            <ui:NavigationViewItem Content="{x:Static lang:Translations.DashboardMenuItem}">
                <ui:NavigationViewItem.IconSource>
                    <ic:SymbolIconSource Symbol="Home" />
                </ui:NavigationViewItem.IconSource>
            </ui:NavigationViewItem>
            <ui:NavigationViewItem Content="{x:Static lang:Translations.StatisticsMenuItem}">
                <ui:NavigationViewItem.IconSource>
                    <ic:SymbolIconSource Symbol="ChartMultiple" />
                </ui:NavigationViewItem.IconSource>
            </ui:NavigationViewItem>
        </ui:NavigationView.MenuItems>

image

Leon99 commented 1 year ago

@NPadrutt +1. The same code using FAvalonia's SymbolIconSource works.

davidxuang commented 1 year ago

I just stumbled over this question. I'm currently try to achieve this aswell. I declared it like this and it starts, but the icon isn't shown. It's just empty. Any idea what I'm doing wrong?

    <ui:NavigationView x:Name="NavigationView"
                       ItemInvoked="NavigationView_OnItemInvoked"
                       IsBackButtonVisible="True"
                       IsBackEnabled="{Binding CanGoBack, Mode=OneWay}"
                       BackRequested="NavigationView_OnBackRequested">
        <ui:NavigationView.MenuItems>
            <ui:NavigationViewItem Content="{x:Static lang:Translations.DashboardMenuItem}">
                <ui:NavigationViewItem.IconSource>
                    <ic:SymbolIconSource Symbol="Home" />
                </ui:NavigationViewItem.IconSource>
            </ui:NavigationViewItem>
            <ui:NavigationViewItem Content="{x:Static lang:Translations.StatisticsMenuItem}">
                <ui:NavigationViewItem.IconSource>
                    <ic:SymbolIconSource Symbol="ChartMultiple" />
                </ui:NavigationViewItem.IconSource>
            </ui:NavigationViewItem>
        </ui:NavigationView.MenuItems>

@NPadrutt @Leon99 This isn't working because the FluentAvalonia use a hard-coded conversion for IconSource (see here). I've updated my SymbolIconSource implementation as a derived class of PathIconSouce. It should be working starting the next automated release.