Tint the bar icon SVG directly instead of masking it

omarchy/plugins/blob.menu/BarWidget.qml

@@ -1,6 +1,6 @@
 import QtQuick
-import QtQuick.Effects
 import Quickshell
+import Quickshell.Io
 import qs.Commons
 import qs.Ui
 
@@ -8,19 +8,43 @@ BarWidget {
   id: root
   moduleName: "omarchy.menu"
 
-  readonly property string iconPath: "file://" + Quickshell.env("HOME") + "/.config/omarchy/branding/blob_icon.svg"
+  readonly property string iconPath: Quickshell.env("HOME") + "/.config/omarchy/branding/blob_icon.svg"
   readonly property int iconSize: Math.round(Style.font.body * 1.35)
 
+  property string iconSvg: ""
+
+  readonly property string iconColor: hexColor(button.foreground)
+  readonly property string tintedSvg: iconSvg.replace(/fill="#000000"/g, 'fill="' + iconColor + '"')
+  readonly property string iconUrl: iconSvg.length > 0 ? "data:image/svg+xml;base64," + Qt.btoa(tintedSvg) : ""
+  readonly property bool iconReady: icon.status === Image.Ready
+
+  function hexColor(value) {
+    function channel(fraction) {
+      return ("0" + Math.round(fraction * 255).toString(16)).slice(-2)
+    }
+    return "#" + channel(value.r) + channel(value.g) + channel(value.b)
+  }
+
   implicitWidth: button.implicitWidth
   implicitHeight: button.implicitHeight
 
+  FileView {
+    path: root.iconPath
+    watchChanges: true
+    printErrors: false
+    onLoaded: root.iconSvg = text()
+    onLoadFailed: root.iconSvg = ""
+    onFileChanged: reload()
+  }
+
   WidgetButton {
     id: button
     anchors.fill: parent
     bar: root.bar
-    labelVisible: false
-    hasVisualContent: true
-    fixedWidth: root.iconSize + Style.spaceReal(15)
+    text: "\ue900"
+    fontFamily: "omarchy"
+    labelVisible: !root.iconReady
+    fixedWidth: root.iconReady ? root.iconSize + Style.spaceReal(15) : -1
     horizontalMargin: 7.5
     onPressed: function(button) {
       if (!root.bar) return
@@ -29,30 +53,15 @@ BarWidget {
     }
 
     Image {
-      id: iconMask
-      source: root.iconPath
-      visible: false
-      smooth: true
-      sourceSize.width: root.iconSize * 2
-      sourceSize.height: root.iconSize * 2
-    }
-
-    Rectangle {
+      id: icon
       anchors.centerIn: parent
       width: root.iconSize
       height: root.iconSize
-      color: button.foreground
-      visible: iconMask.status === Image.Ready
-      layer.enabled: true
-      layer.effect: MultiEffect {
-        maskEnabled: true
-        maskSource: iconMask
-      }
-
-      Behavior on color {
-        enabled: !root.bar || root.bar.foregroundAnimationEnabled
-        ColorAnimation { duration: 160 }
-      }
+      source: root.iconUrl
+      sourceSize.width: root.iconSize * 2
+      sourceSize.height: root.iconSize * 2
+      smooth: true
+      visible: root.iconReady
     }
   }
 }