提升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()
.UsePlatformDetect()
.LogToTrace();
}在布局文件里添加命名空间
xmlns:i="https://github.com/projektanker/icons.avalonia"使用
然后就可以使用图标了
独立使用（Standalone）
独立显示一个图标。
附加到内容控件（例如 Button）（Attached to ContentControl，例如按钮）
将图标附加到按钮等控件中。
附加到菜单项（MenuItem）（Attached to MenuItem）
在菜单项中添加图标，例如“关于”菜单。
自定义图标大小（Custom icon size）
设置图标字体大小为 24。
添加动画效果（Animated）
为图标添加动画：
[*]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
支持以下这么多图标…
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]