Skip to content

A markup extension for Avalonia, that allows you to use Font Awesome. It already contains version 6 (alpha 2). You can combine upto two glyphs. Including style, colors, outline, placement or custom SVG styling.

License

Notifications You must be signed in to change notification settings

SmartK8/Velvet.Library.Avalonia.Font.Awesome

Repository files navigation

Velvet.Library.Avalonia.Font.Awesome

A markup extension for Avalonia, that allows you to use Font Awesome. It already contains version 6 (alpha 2). You can combine upto two glyphs. Including style, colors, outline, placement or custom SVG styling.

Features?

  • already prepackaged version 6 (alpha 2)
  • all supported versions (brands, duotone, light, regular, solid, thin)
  • up to 2 glyphs :D
  • you can choose brushes
  • outline color/width
  • placement and relative sizing
  • automatically detects if element you use it on is enabled/disabled
  • alternatively you can just write custom SVG style snippet,
    that will be inserted into <path style="{your_style}" />

Usage?

  1. Add declaration in your XAML:

xmlns:a="clr-namespace:Library.Font.Awesome;assembly=Library.Font.Awesome"

  1. Use markup extension and set properties:

<Image Source="{a:Awesome Major=person, Minor=plus, Secondary=DarkGreen}" />

  1. Additionally you can use global defaults (set in your code - App.axaml.cs),
    so all the images will have these settings:
Awesome.DefaultVersion = FontVersion.Solid;
Awesome.DefaultPrimary = Brushes.White;

Results?

image

Properties explained:

Version - enum that decides Awesome Font style (brands/duotone/light/regular/solid/thin)
Placement - layout of glyph or glyphs
Major - name of the glyph #1 (main glyph)
Minor - name of the glyph #2 (side glyph)
Primary - color of the glyph #1 (ISolidColorBrush) - default: Black
Secondary - color of the glyph #2 (ISolidColorBrush) - default: Black
Outline - color of the outline (ISolidColorBrush) - default: Transparent
Width - width of the outline - default: 0
Style - string to be inserted into <path style="{style}" />

Placement explained:

Left - aligns glyph #2 to the left
Right - aligns glyph #2 to the right
Top - aligns glyph #2 to the top
Bottom - aligns glyph #2 to the bottom

Under - makes glyph #2 appear behind glyph #1

Quarter - when X1 is specified it means glyph #2 is 1/4 size, when not glyph #1 covers to 3/4 of glyph #2
Half - when X1 is specified it means glyph #2 is 1/2 size, when not glyph #1 covers to 1/2 of glyph #2
Full - when X1 is specified it means glyph #2 is full size, when not glyph #1 doesn't cover glyph #2

X1 - scales glyph #2 to full size (see Full/Half/Quarter)
X2 - scales glyph #2 to 1/2
X3 - scales glyph #2 to 1/3
X4 - scales glyph #2 to 1/4

You can combine X2/X3/X4. Example: X2,X3 = 1/2 + 1/3 = 5/6

By default the placement is X2,Half,Right,Bottom (you can see it in the picture)

About

A markup extension for Avalonia, that allows you to use Font Awesome. It already contains version 6 (alpha 2). You can combine upto two glyphs. Including style, colors, outline, placement or custom SVG styling.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages