Dockable icons

src/PixiEditor.AvaloniaUI/Models/Commands/XAML/Menu.cs

@@ -7,6 +7,9 @@ namespace PixiEditor.AvaloniaUI.Models.Commands.XAML;
 
 internal class Menu : global::Avalonia.Controls.Menu
 {
+    public const double IconDimensions = 21;
+    public const double IconFontSize = 16;
+    
     public static readonly AttachedProperty<string> CommandProperty =
         AvaloniaProperty.RegisterAttached<Menu, MenuItem, string>(nameof(Command));
 
@@ -14,8 +17,6 @@ internal class Menu : global::Avalonia.Controls.Menu
     {
         CommandProperty.Changed.Subscribe(CommandChanged);
     }
-
-    public const double IconDimensions = 21;
     public static string GetCommand(MenuItem menu) => (string)menu.GetValue(CommandProperty);
     public static void SetCommand(MenuItem menu, string value) => menu.SetValue(CommandProperty, value);
 

src/PixiEditor.AvaloniaUI/ViewModels/Dock/ColorPickerDockViewModel.cs

@@ -1,8 +1,11 @@
 using Avalonia;
+using Avalonia.Controls;
 using Avalonia.Media;
+using Avalonia.Svg.Skia;
 using PixiEditor.AvaloniaUI.Helpers.Converters;
 using PixiEditor.AvaloniaUI.ViewModels.SubViewModels;
 using PixiEditor.Extensions.Common.Localization;
+using PixiEditor.UI.Common.Fonts;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
 
@@ -25,7 +28,6 @@ internal class ColorPickerDockViewModel : DockableViewModel
     public ColorPickerDockViewModel(ColorsViewModel colorsSubVm)
     {
         ColorsSubViewModel = colorsSubVm;
-        TabCustomizationSettings.Icon =
-            ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/ColorPicker.png");
+        TabCustomizationSettings.Icon = PixiPerfectIcons.ToIconControl(PixiPerfectIcons.ColorPicker);
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/Dock/ColorSlidersDockViewModel.cs

@@ -3,6 +3,7 @@ using Avalonia.Media;
 using PixiEditor.AvaloniaUI.Helpers.Converters;
 using PixiEditor.AvaloniaUI.ViewModels.SubViewModels;
 using PixiEditor.Extensions.Common.Localization;
+using PixiEditor.UI.Common.Fonts;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
 
@@ -25,7 +26,6 @@ internal class ColorSlidersDockViewModel : DockableViewModel
     public ColorSlidersDockViewModel(ColorsViewModel colorsSubVm)
     {
         ColorsSubViewModel = colorsSubVm;
-        TabCustomizationSettings.Icon =
-            ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/ColorPicker.png");
+        TabCustomizationSettings.Icon = PixiPerfectIcons.ToIconControl(PixiPerfectIcons.ColorSliders);
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/Dock/LayersDockViewModel.cs

@@ -3,6 +3,7 @@ using PixiDocks.Core.Docking;
 using PixiEditor.AvaloniaUI.Helpers.Converters;
 using PixiEditor.AvaloniaUI.ViewModels.Document;
 using PixiEditor.Extensions.Common.Localization;
+using PixiEditor.UI.Common.Fonts;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
 
@@ -33,8 +34,7 @@ internal class LayersDockViewModel : DockableViewModel
     {
         DocumentManager = documentManager;
         DocumentManager.ActiveDocumentChanged += DocumentManager_ActiveDocumentChanged;
-        TabCustomizationSettings.Icon =
-            ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/Layers.png");
+        TabCustomizationSettings.Icon = PixiPerfectIcons.ToIconControl(PixiPerfectIcons.Layers);
     }
 
     private void DocumentManager_ActiveDocumentChanged(object? sender, DocumentChangedEventArgs e)

src/PixiEditor.AvaloniaUI/ViewModels/Dock/NavigationDockViewModel.cs

@@ -3,6 +3,7 @@ using PixiEditor.AvaloniaUI.Helpers.Converters;
 using PixiEditor.AvaloniaUI.ViewModels.Document;
 using PixiEditor.AvaloniaUI.ViewModels.SubViewModels;
 using PixiEditor.Extensions.Common.Localization;
+using PixiEditor.UI.Common.Fonts;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
 
@@ -35,6 +36,6 @@ internal class NavigationDockViewModel : DockableViewModel
     {
         ColorsSubViewModel = colorsSubViewModel;
         DocumentManagerSubViewModel = documentManagerViewModel;
-        TabCustomizationSettings.Icon = ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/Navigator.png");
+        TabCustomizationSettings.Icon = PixiPerfectIcons.ToIconControl(PixiPerfectIcons.Compass);
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/Dock/PaletteViewerDockViewModel.cs

@@ -2,6 +2,7 @@
 using PixiEditor.AvaloniaUI.ViewModels.Document;
 using PixiEditor.AvaloniaUI.ViewModels.SubViewModels;
 using PixiEditor.Extensions.Common.Localization;
+using PixiEditor.UI.Common.Fonts;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
 
@@ -32,6 +33,7 @@ internal class PaletteViewerDockViewModel : DockableViewModel
         ColorsSubViewModel = colorsSubViewModel;
         DocumentManagerSubViewModel = documentManagerViewModel;
 
-        TabCustomizationSettings.Icon = ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/PaletteViewer.png");
+        TabCustomizationSettings.Icon = PixiPerfectIcons.ToIconControl(PixiPerfectIcons.ColorPalette);
+
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/Dock/SwatchesDockViewModel.cs

@@ -2,6 +2,7 @@
 using PixiEditor.AvaloniaUI.Helpers.Converters;
 using PixiEditor.AvaloniaUI.ViewModels.Document;
 using PixiEditor.Extensions.Common.Localization;
+using PixiEditor.UI.Common.Fonts;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
 
@@ -23,6 +24,6 @@ internal class SwatchesDockViewModel : DockableViewModel
     public SwatchesDockViewModel(DocumentManagerViewModel documentManagerViewModel)
     {
         DocumentManagerSubViewModel = documentManagerViewModel;
-        TabCustomizationSettings.Icon = ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/Swatches.png");
+        TabCustomizationSettings.Icon = PixiPerfectIcons.ToIconControl(PixiPerfectIcons.Grid);
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/Menu/MenuBuilders/OpenDockablesMenuBuilder.cs

@@ -38,12 +38,25 @@ internal class OpenDockablesMenuBuilder : MenuItemBuilder
                         .ProvideValue(null);
                 dockableItem.CommandParameter = dockable.Id;
 
-                dockableItem.Icon = new Image()
+                if (dockable.TabCustomizationSettings.Icon is IImage image)
                 {
-                    Source = (IImage?)dockable.TabCustomizationSettings?.Icon,
-                    Width = Models.Commands.XAML.Menu.IconDimensions,
-                    Height = Models.Commands.XAML.Menu.IconDimensions
-                };
+                    dockableItem.Icon = new Image()
+                    {
+                        Source = image,
+                        Width = Models.Commands.XAML.Menu.IconDimensions,
+                        Height = Models.Commands.XAML.Menu.IconDimensions,
+                    };
+                }
+                else if(dockable.TabCustomizationSettings.Icon is TextBlock tb)
+                {
+                    dockableItem.Icon = new TextBlock()
+                    {
+                        Text = tb.Text,
+                        FontSize = Models.Commands.XAML.Menu.IconFontSize,
+                        FontFamily = tb.FontFamily,
+                    };
+                }
+                
                 dockablesItem.Items.Add(dockableItem);
             }
         }

src/PixiEditor.AvaloniaUI/ViewModels/Tools/Tools/ColorPickerToolViewModel.cs

@@ -27,7 +27,7 @@ internal class ColorPickerToolViewModel : ToolViewModel, IColorPickerHandler
     public override string ToolNameLocalizationKey => "COLOR_PICKER_TOOL";
     public override BrushShape BrushShape => BrushShape.Pixel;
 
-    public override string IconKey => "icon-color-picker";
+    public override string IconKey => "icon-picker";
 
     public override LocalizedString Tooltip => new("COLOR_PICKER_TOOLTIP", Shortcut);
 

src/PixiEditor.UI.Common/Fonts/PixiPerfectIcons.axaml

@@ -43,7 +43,7 @@
             <system:String x:Key="icon-exit">&#xE923;</system:String>
             <system:String x:Key="icon-eye-off">&#xE924;</system:String>
             <system:String x:Key="icon-eye">&#xE925;</system:String>
-            <system:String x:Key="icon-file-90">&#xE926;</system:String>
+            <system:String x:Key="icon-file-minus90">&#xE926;</system:String>
             <system:String x:Key="icon-file-plus">&#xE927;</system:String>
             <system:String x:Key="icon-file-text">&#xE928;</system:String>
             <system:String x:Key="icon-file">&#xE929;</system:String>

src/PixiEditor.UI.Common/Fonts/PixiPerfectIcons.axaml.cs

@@ -0,0 +1,121 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Media;
+
+namespace PixiEditor.UI.Common.Fonts;
+
+//TODO: Make autogenerated from PixiPerfectIcons.axaml
+public static class PixiPerfectIcons
+{
+    public const string AddReference = "\ue900";
+    public const string AddToMask = "\ue901";
+    public const string AlphaLock = "\ue902";
+    public const string AlphaUnlock = "\ue903";
+    public const string ArrowDown = "\ue904";
+    public const string ArrowLeft = "\ue905";
+    public const string ArrowRight = "\ue906";
+    public const string ArrowUp = "\ue907";
+    public const string Book = "\ue908";
+    public const string Bucket = "\ue909";
+    public const string CanvasResize = "\ue90a";
+    public const string Center = "\ue90b";
+    public const string ChevronDown = "\ue90c";
+    public const string ChevronLeft = "\ue90d";
+    public const string ChevronRight = "\ue90e";
+    public const string ChevronUp = "\ue90f";
+    public const string Circle = "\ue910";
+    public const string Clock = "\ue911";
+    public const string ColorPalette = "\ue912";
+    public const string ColorPicker = "\ue913";
+    public const string ColorSliders = "\ue914";
+    public const string ColorsSwap = "\ue915";
+    public const string Compass = "\ue916";
+    public const string Copy = "\ue917";
+    public const string CornerUpLeft = "\ue918";
+    public const string CornerUpRight = "\ue919";
+    public const string CreateMask = "\ue91a";
+    public const string CropToSelection = "\ue91b";
+    public const string Crop = "\ue91c";
+    public const string Database = "\ue91d";
+    public const string Deselect = "\ue91e";
+    public const string Droplet = "\ue91f";
+    public const string DuplicateFile = "\ue920";
+    public const string Duplicate = "\ue921";
+    public const string Edit = "\ue922";
+    public const string Exit = "\ue923";
+    public const string EyeOff = "\ue924";
+    public const string Eye = "\ue925";
+    public const string FileMinus90 = "\ue926";
+    public const string FilePlus = "\ue927";
+    public const string FileText = "\ue928";
+    public const string File = "\ue929";
+    public const string File90 = "\ue92a";
+    public const string File180 = "\ue92b";
+
+    public const string FolderPlus = "\ue92c";
+    public const string Folder = "\ue92d";
+    public const string Globe = "\ue92e";
+    public const string Grid = "\ue92f";
+    public const string Home = "\ue930";
+    public const string ImageMinus90 = "\ue931";
+    public const string Image = "\ue932";
+    public const string Image90 = "\ue933";
+    public const string Image180 = "\ue934";
+    public const string Info = "\ue935";
+    public const string Intersect = "\ue936";
+    public const string Invert = "\ue937";
+    public const string Lasso = "\ue938";
+    public const string Layers = "\ue939";
+    public const string Line = "\ue93a";
+    public const string Lock = "\uE93B";
+    public const string LogOut = "\uE93C";
+    public const string MagicWand = "\uE93D";
+    public const string Minimize2 = "\uE93E";
+    public const string Minimize = "\uE93F";
+    public const string MousePointer = "\uE940";
+    public const string MoveView = "\uE942";
+    public const string NewMask = "\uE943";
+    public const string Paste = "\uE944";
+    public const string VectorPen = "\uE945";
+    public const string Picker = "\uE946";
+    public const string PlusSquare = "\uE947";
+    public const string RectangleSelection = "\uE948";
+    public const string Redo = "\uE949";
+    public const string ReferenceLayer = "\uE94A";
+    public const string Resize = "\uE94B";
+    public const string RotateView = "\uE94C";
+    public const string Eraser = "\uE94D";
+    public const string Save = "\uE94E";
+    public const string Scissors = "\uE94F";
+    public const string SelectAll = "\uE950";
+    public const string Settings = "\uE951";
+    public const string Sliders = "\uE952";
+    public const string Square = "\uE953";
+    public const string Subtract = "\uE954";
+    public const string Sun = "\uE955";
+    public const string Swap = "\uE956";
+    public const string Tool = "\uE957";
+    public const string Trash = "\uE958";
+    public const string Undo = "\uE959";
+    public const string Unlock = "\uE95A";
+    public const string XFlip = "\uE95B";
+    public const string XSelectedFlip = "\uE95C";
+    public const string XSymmetry = "\uE95D";
+    public const string YFlip = "\uE95E";
+    public const string YSelectedFlip = "\uE95F";
+    public const string YSymmetry = "\uE960";
+    public const string ZoomIn = "\uE961";
+    public const string ZoomOut = "\uE962";
+
+    public static TextBlock ToIconControl(string unicode)
+    {
+        return new TextBlock()
+        {
+            Text = unicode,
+            FontFamily = Application.Current.Styles.TryGetResource("PixiPerfectIcons", null, out var font) ? font as FontFamily : null,
+            FontSize = 16,
+            VerticalAlignment = Avalonia.Layout.VerticalAlignment.Center,
+            HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Center
+        };
+    }
+}