前言

之前我寫了 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<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" />

在菜單項中添加圖標，例如“關于”菜單。

自定義圖標大?。–ustom 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}" />

還可以設置大?。?/p>

<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+）還多……??