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

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

鼓励转贴优秀软件安全工具和文档！

前排留名，哈哈哈

喜欢鼓捣这些软件，现在用得少，谢谢分享！

新版吗？好像是停更了吧。

东西不错很实用谢谢分享

用心讨论，共获提升！

新版吗？好像是停更了吧。

鼓励转贴优秀软件安全工具和文档！

喜欢鼓捣这些软件，现在用得少，谢谢分享！

东西不错很实用谢谢分享

过来提前占个楼

懂技术并乐意极积无私分享的人越来越少。珍惜

过来提前占个楼

收藏一下   不知道什么时候能用到

这个有用。

很好很强大  我过来先占个楼 待编辑

很好很强大  我过来先占个楼 待编辑

这个好，看起来很实用

感谢分享