DOCSEARCHbyAlgolia
Submit Docs

FluentIcons

repository·master·Indexed 42 days ago

https://github.com/davidxuang/fluenticons

A multi-framework .NET library providing Microsoft's Fluent UI System Icons for Avalonia, MAUI, WinUI, WPF, and WinForms. It includes <FluentIcon> and <SymbolIcon> XAML elements, support for various icon variants (Regular, Filled, Color), and an experimental Outline feature. The library is distributed via NuGet and includes the Seagull Icons set, which supports the COLR/CPAL format for color icons.

Tokens
5.4K
Snippets
21
Records
29
Agent score
49%

What's inside FluentIcons

  2. Overview of Seagull Fluent Icons

    master
    Seagull Icons is a modified icon set derived from fluentui-system-icons. It is designed to provide an appearance similar to Segoe MDL2 Assets and Segoe Fluent Icons. A key technical feature is its support for the COLR/CPAL format, which ensures that color icons are displayed correctly in supported environments.

  3. Compare Fluent vs Symbol icon variants

    master

    The library offers two distinct visual approaches:

    1. Fluent variant: Provides upstream icon sizes untouched (12, 16, 20, 24, 28, 32, 48). The 20x20 size is the standard upstream size.
    2. Symbol variant: Mimics the appearance and geometric metrics of SymbolIcon and Segoe Fluent Icons from WinUI. It features trimmed borders and rearranged shapes to match Segoe metrics. It is primarily available in 16x16 (Segoe-like) and 28x28 (light) sizes.

  5. Platform-specific implementation notes

    master

    MAUI

    • Setup: You MUST call UseFluentIcons(this MauiAppBuilder builder) at startup to register fonts.
    • Icon Sources: Uses <SymbolImageSource> and SymbolImageSourceExtension.
    • Colors: All Brush properties are defined as Color types with a Color suffix.

    UWP / WinUI

    • Uses the Win2D package for the Outline feature. It is recommended to override the library's Win2D reference with the latest version of the package for better stability.

    WinForms

    • Rendering: Supports GDI and GDI+ (for Windows 8+).
    • Limitations:
      • On GDI-supported platforms, the alpha channel of ForeColor is ignored.
      • Color icons are not supported on WinForms.

    WPF

    • Limitations: Color icons are currently broken on WPF due to lack of [COLR] rendering support. This also affects environments using SkiaSharp 2 (like macOS or WebAssembly/Avalonia/Uno).

  6. Use FluentIcon and SymbolIcon in XAML

    master

    The library provides <FluentIcon> and <SymbolIcon> elements for XAML-based platforms (WinUI, Avalonia, MAUI, WPF).

    • <FluentIcon> uses the Icon property and supports IconSize.
    • <SymbolIcon> uses the Symbol property and mimics Segoe Fluent Icons behavior.

    Common properties available on these elements (and their corresponding Source versions) include:

    • Icon / Symbol: The specific icon identifier.
    • IconVariant: The visual style (e.g., Regular, Filled, Color).
    • IconSize: (For FluentIcon only) The size of the icon.
    • FlowDirection: Controls LTR/RTL orientation.
    • FontSize: A double value for sizing.
    • Foreground: A Brush for coloring the icon.
    <Page xmlns:ic="using:FluentIcons.WinUI">
    <!-- Using FluentIcon -->
    <ic:FluentIcon Icon="ArrowLeft" IconVariant="Regular" IconSize="Size32" />
    
    <!-- Using SymbolIcon -->
    <ic:SymbolIcon Symbol="Calendar" IconVariant="Color" />
</Page>

  7. Select the appropriate FluentIcons package for your platform

    master

    Choose a package based on your target framework and version requirements. The library provides specific packages for Avalonia, MAUI, UWP, WinForms, WinUI, and WPF.

    Available Packages by Platform

    PackagePlatform
    FluentIcons.AvaloniaAvalonia 12
    FluentIcons.Avalonia.FluentFluentAvalonia 3 (Avalonia 12)
    FluentIcons.MauiMAUI 10
    FluentIcons.UwpUWP 10.0.10773 or Uno.UI 5.4
    FluentIcons.WinForms.NET Framework 4.5 or .NET 6
    FluentIcons.WinUIWindows App SDK 1.8.5 or Uno.WinUI 6.0
    FluentIcons.Wpf.NET Framework 4.5 or .NET 6
    FluentIcons.CommonMeta package
    FluentIcons.Common.ExtensionsMeta package

  8. Add and configure shared assets in WinUI

    master

    To use shared assets (like images) in a WinUI project, follow these steps:

    1. Add the image file to the Assets directory of your shared project.
    2. Set the file's Build Action to Content in your project properties.
    3. (Recommended) Provide multiple versions of the asset for different scales/DPIs to ensure high-quality rendering across devices.
    1. Add the image file to the `Assets` directory of a shared project.
2. Set the build action to `Content`.

  9. Asset naming conventions for different scales

    master

    When providing assets for various scales, you can use two different directory structures.

    Option 1: Suffix naming (WinUI style) Use the .scale-N suffix directly on the filename:

    \Assets\Images\logo.scale-100.png
\Assets\Images\logo.scale-200.png
\Assets\Images\logo.scale-400.png

    Option 2: Subdirectory naming Place images in scale-specific subdirectories:

    \Assets\Images\scale-100\logo.png
\Assets\Images\scale-200\logo.png
\Assets\Images\scale-400\logo.png
    \Assets\Images\logo.scale-100.png
\Assets\Images\logo.scale-200.png
\Assets\Images\logo.scale-400.png

\Assets\Images\scale-100\logo.png
\Assets\Images\scale-200\logo.png
\Assets\Images\scale-400\logo.png

  10. Define Gradients and Filters in Defs

    master

    Advanced visual effects like gradients and filters must be defined within a Defs container (the <defs> tag). These definitions are then referenced by ID in other elements.

    export type Defs = ElemBase & {
  '#name': 'defs';
  $$?: Def[];
};

export type Def = LinearGradient | RadialGradient | ClipPath | Filter;

  11. Understand the transform configuration schema

    master

    The transform process relies on a TOML configuration file that defines how icons are redirected, how they are base-translated, and how they are composed with badges.

    Configuration Sections

    • redirect: Maps icon names to new paths or categories. Can be a simple string or an object mapping categories to paths.
    • base: Defines metadata for base icons, including translation offsets (u, v, ul, vl) and RTL flipping (vflip).
    • template: Defines BadgeTemplate objects used as blueprints for badge composition.
    • compose: Defines how badges are composed with icons. It uses a descriptor syntax to resolve icon names and styles.

    Descriptor Syntax

    Icon descriptors in the compose section follow this pattern: icon:root[modifier]#/override@lang:lang

    Where:

    • icon: The base icon name.
    • :root: The root/alias.
    • [modifier]: An optional modifier.
    • #/override: An optional override path.
    • @lang:lang: Optional language specification (source and destination).

  12. Use FluentIcons Markup Extensions

    master

    Since version 1.3, markup extensions are located in a child namespace. You can use them to provide icons directly within other control properties (like an Expander header) using the {icx:SymbolIcon} syntax.

    <Page xmlns:icx="using:FluentIcons.WinUI.Markup">
    <Expander Header="{icx:SymbolIcon Symbol=ArrowLeft}" />
</Page>