WIP

Author: Colin Mackay

src/.idea/.idea.Stravaig.Avalonia.Controls.Icons/.idea/avalonia.xml

@@ -1,7 +1,9 @@
 using System;
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Media;
 using Avalonia.Svg.Skia;
+using Svg.Model;
 
 namespace Stravaig.Avalonia.Controls.Icons;
 
@@ -19,6 +21,10 @@ public class PhosphorIcon : Image
         AvaloniaProperty.Register<PhosphorIcon, PhosphorIconName>(
             nameof(IconName));
 
+    public static readonly StyledProperty<HsvColor> ColorProperty =
+        AvaloniaProperty.Register<PhosphorIcon, HsvColor>(
+            nameof(Color));
+
     public PhosphorIconType IconType
     {
         get => GetValue(IconTypeProperty);
@@ -31,10 +37,17 @@ public PhosphorIconName IconName
         set => SetValue(IconNameProperty, value);
     }
 
+    public HsvColor Color
+    {
+        get => GetValue(ColorProperty);
+        set => SetValue(ColorProperty, value);
+    }
+
     static PhosphorIcon()
     {
         IconTypeProperty.Changed.AddClassHandler<PhosphorIcon>((x, _) => x.UpdateImageSource());
         IconNameProperty.Changed.AddClassHandler<PhosphorIcon>((x, _) => x.UpdateImageSource());
+        ColorProperty.Changed.AddClassHandler<PhosphorIcon>((x, _) => x.UpdateImageSource());
     }
 
     public PhosphorIcon()
@@ -55,12 +68,16 @@ private void UpdateImageSource()
             return;
         }
 
-        // Delegate actual SVG rendering to Avalonia's Image via SvgImage
         try
         {
+            var css = BuildCss();
+            Console.WriteLine($"Loading {resource}\n    with CSS: {css}");
+            var sourceImage = SvgSource.Load(resource);
             var svg = new SvgImage
             {
-                Source = SvgSource.Load(resource),
+                Source = sourceImage,
+                Css = css,
+                //CurrentCss = css,
             };
             Source = svg;
         }
@@ -69,4 +86,11 @@ private void UpdateImageSource()
             Source = null;
         }
     }
+
+    private string BuildCss()
+    {
+        var rgb = Color.ToRgb();
+        var css = $"svg {{ fill: rgb({rgb.R}, {rgb.G}, {rgb.B}); }}";
+        return css;
+    }
 }

src/Stravaig.Avalonia.Controls.Icons/PhosphorIcon/PhosphorIcon.cs

@@ -36,7 +36,7 @@ public PhosphorIconDemoViewModel()
         _selectedIconTypeIndex = 0;
         _selectedIconType = IconTypes[0].Key;
         _iconSize = 24;
-        _colour = new HsvColor(Color.FromRgb(0x80, 0x80, 0x80));
+        _colour = new HsvColor(Color.FromRgb(0xFF, 0x00, 0x00));
         _rgbColour = _colour.ToRgb().ToString();
     }
 
@@ -46,7 +46,7 @@ public PhosphorIconDemoViewModel()
 
     partial void OnColourChanged(HsvColor value)
     {
-        RgbColour = Colour.ToRgb().ToString();
+        RgbColour = value.ToRgb().ToString();
     }
 
     partial void OnSelectedIconTypeIndexChanged(int? value)

src/Stravaig.Icons.Example/ViewModels/PhosphorIconDemoViewModel.cs

@@ -97,6 +97,7 @@
                                 HorizontalAlignment="Left">
                                 <StackPanel Orientation="Vertical">
                                     <icons:PhosphorIcon
+                                        Color="{Binding #PhosphorIconDemo.((vm:PhosphorIconDemoViewModel)DataContext).Colour, FallbackValue=Gray}"
                                         IconName="{Binding Key}"
                                         IconType="{Binding #PhosphorIconDemo.((vm:PhosphorIconDemoViewModel)DataContext).SelectedIconType, FallbackValue={x:Static icons:PhosphorIconType.Regular}}"
                                         Width="{Binding #PhosphorIconDemo.((vm:PhosphorIconDemoViewModel)DataContext).IconSize, FallbackValue=24}"