前言
之前我写了 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+）还多……😂