提升Avalonia UI质感，跨平台图标库选型实践

前言

之前我写了 StarBlog 发布工具更新了版本，优化了一下界面，其中就把 emoji 表情换成了 FontAwesome 图标

emoji 如果只在一个系统上用（如 Windows）

那可能没啥问题

但我多个设备之间切换，就发现在 macOS 上效果不好，有些 emoji 显示得和 Windows 不一样

现在全部换成 Font Awesome 了，统一美观很多。感觉换图标这件事就可以单独写一篇文章了。

Avalonia 的生态还可以，有不同的图标库可选，本文主要介绍两个。

• Icon.Avalonia
• IconPacks.Avalonia

Icon.Avalonia

https://github.com/Projektanker/Icons.Avalonia

这个库支持两种图标，目前 Star 数量 365

• Projektanker.Icons.Avalonia.FontAwesome
• Projektanker.Icons.Avalonia.MaterialDesign

我在 StarBlog Publisher 工具里使用的就是这个库，用起来蛮简单的。

安装

这里以 FontAwesome 为例，先添加依赖

dotnet add package Projektanker.Icons.Avalonia.FontAwesome

在 Program.BuildAvaloniaApp 方法里注册

public static AppBuilder BuildAvaloniaApp() {
  IconProvider.Current
    .Register<FontAwesomeIconProvider>();

  return AppBuilder.Configure<App>()
    .UsePlatformDetect()
    .LogToTrace();
}

在布局文件里添加命名空间

xmlns:i="https://github.com/projektanker/icons.avalonia"

使用

然后就可以使用图标了

独立使用（Standalone）

<i:Icon Value="fa-brands fa-anchor" />

独立显示一个图标。

附加到内容控件（例如 Button）（Attached to ContentControl，例如按钮）

<Button i:Attached.Icon="fa-brands fa-anchor" />

将图标附加到按钮等控件中。

附加到菜单项（MenuItem）（Attached to MenuItem）

<MenuItem Header="关于" i:MenuItem.Icon="fa-solid fa-circle-info" />

在菜单项中添加图标，例如“关于”菜单。

自定义图标大小（Custom icon size）

<i:Icon Value="fa-brands fa-anchor" FontSize="24" />

设置图标字体大小为 24。

添加动画效果（Animated）

<i:Icon Value="fa-spinner" Animation="Pulse" />
<i:Icon Value="fa-sync" Animation="Spin" />

为图标添加动画：

• Pulse：跳动效果

• Spin：旋转效果

作为图像源使用（As an Image source）

<Image>
  <Image.Source>
    <i:IconImage Value="fa-brands fa-anchor" Brush="(默认为黑色)" />
  </Image.Source>
</Image>

将图标作为图像显示，可通过 Brush 设置颜色（默认黑色）。

IconPacks.Avalonia

https://github.com/MahApps/IconPacks.Avalonia

这个库支持的图标就多了，不过很奇怪，Star 数量才 62

支持以下这么多图标…😂，非常丰富！

• BootstrapIcons
• BoxIcons
• CircumIcons
• Codicons
• Coolicons
• Entypo
• EvaIcons
• FeatherIcons
• FileIcons
• Fontaudio
• FontAwesome
• Fontisto
• ForkAwesome
• GameIcons
• Ionicons
• JamIcons
• Lucide
• Material
• MaterialLight
• MaterialDesign
• MemoryIcons
• Microns
• Modern
• Octicons
• PhosphorIcons
• PicolIcons
• PixelartIcons
• RadixIcons
• RemixIcon
• RPGAwesome
• SimpleIcons
• Typicons
• Unicons
• VaadinIcons
• WeatherIcons
• Zondicons

安装

这里也是以 FontAwesome 为例

dotnet add package IconPacks.Avalonia.FontAwesome

添加命名空间

xmlns:iconPacks="https://github.com/MahApps/IconPacks.Avalonia"

注册到 Applications styles

<Application.Styles>
  <FluentTheme />

  <StyleInclude Source="avares://IconPacks.Avalonia/Icons.axaml" />
  <StyleInclude Source="avares://IconPacks.Avalonia.FontAwesome/Icons.axaml" />
</Application.Styles>

PackIcon 控件

PackIcon 控件是使用图标包中图标的主要方式。

每个图标包都有各自的控件，命名格式如下：

PackIcon<包名>

例如使用 FontAwesome 的图标：

<iconPacks:PackIconFontAwesome Kind="SolidAnchor"
                               Width="24"
                               Height="24" />

或者：

<iconPacks:PackIconFontAwesome Kind="BrandsGithub"
                               Width="24"
                               Height="24" />

通用控件 PackIconControl

PackIconControl 是一个通用控件，可以用来显示任何图标包中的图标。

仅在主包 IconPacks.Avalonia 中可用。

<iconPacks:PackIconControl Kind="{x:Static iconPacks:PackIconFontAwesomeKind.SolidAnchor}"
                           Width="24"
                           Height="24" />

PackIcon 标记扩展（MarkupExtensions）

更快捷的方式是使用 PackIcon 的标记扩展（MarkupExtension）来设置 ContentControl 的内容。

例如，你可以在 Button 中添加 FontAwesome 图标：

<Button Content="{iconPacks:FontAwesome SolidAnchor}" />

或者使用参数形式：

<Button Content="{iconPacks:FontAwesome Kind=SolidAnchor}" />

还可以设置大小：

<Button Content="{iconPacks:FontAwesome SolidAnchor, Width=32, Height=32}" />

如果使用的是主包，还可以使用通用写法：

<Button Content="{iconPacks:PackIcon {x:Static iconPacks:PackIconFontAwesomeKind.SolidAnchor}, Width=32, Height=32}" />

PackIcon 图像标记扩展（Image MarkupExtensions）

还可以将图标作为图片使用：

<Image Source="{iconPacks:FontAwesomeImage Kind=SolidAnchor, Brush=DarkBlue}"
       Width="24" Height="24"
       HorizontalAlignment="Left" Margin="10" />

也可以使用通用写法（主包中可用）：

<Image Source="{iconPacks:PackIconImage Kind={x:Static iconPacks:PackIconFontAwesomeKind.SolidAnchor}, Brush=DarkOrange}"
       Width="24" Height="24"
       HorizontalAlignment="Left" Margin="10" />

PackIcon 图像转换器（ImageConverter）

还可以使用图标转换器将绑定的数据转换为图标图像：

<Image Source="{Binding #FontAwesomeKindComboBox.SelectedItem, Mode=OneWay, Converter={iconPacks:PackIconFontAwesomeKindToImageConverter Brush=Crimson}}"
       Width="24" Height="24"
       HorizontalAlignment="Left" Margin="10" />

主包中还提供了一个通用转换器：

<Image Source="{Binding #FontAwesomeKindComboBox.SelectedItem, Mode=OneWay, Converter={iconPacks:PackIconKindToImageConverter Brush=Crimson}}"
       Width="24" Height="24"
       HorizontalAlignment="Left" Margin="10" />

如需进一步了解 FontAwesome 支持的图标类型（Solid、Regular、Brands 等），可以查看 PackIconFontAwesomeKind 枚举，或在 IDE 中代码补全里查看所有可用图标名称。

图标浏览工具

https://github.com/MahApps/IconPacks.Browser

这个 IconPacks 还提供了个图标浏览器，可以很方便的搜索图标和复制代码

确实是非常完善了~

不过让我没想到的事，这个图标浏览器的Star（170+）比图标本体（60+）还多……😂