提升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 为例，先添加依赖

1. dotnet add package Projektanker.Icons.Avalonia.FontAwesome

复制代码

在 Program.BuildAvaloniaApp 方法里注册

1. public static AppBuilder BuildAvaloniaApp() {
2.   IconProvider.Current
3.     .Register<FontAwesomeIconProvider>();
5.   return AppBuilder.Configure()
6.     .UsePlatformDetect()
7.     .LogToTrace();
8. }

复制代码

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

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

复制代码

使用

然后就可以使用图标了
独立使用（Standalone）

1. [/code][indent]独立显示一个图标。
2. [/indent][size=3]附加到内容控件（例如 Button）（Attached to ContentControl，例如按钮）[/size]
4. [code]

复制代码

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

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

1. [/code][indent]在菜单项中添加图标，例如“关于”菜单。
2. [/indent][size=3]自定义图标大小（Custom icon size）[/size]
4. [code]

复制代码

设置图标字体大小为 24。

添加动画效果（Animated）

1. [/code][indent]为图标添加动画：
2. [list]
3. [*]Pulse：跳动效果
4. [*]Spin：旋转效果
5. [/list][/indent][size=3]作为图像源使用（As an Image source）[/size]
7. [code]<Image>
8.   <Image.Source>
9.     <i:IconImage Value="fa-brands fa-anchor" Brush="(默认为黑色)" />
10.   </Image.Source>
11. </Image>

复制代码

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

IconPacks.Avalonia

https://github.com/MahApps/IconPacks.Avalonia
这个库支持的图标就多了，不过很奇怪，Star 数量才 62

支持以下这么多图标…
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！