提升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

我在 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+）还多……