create icon type

assets/triangle-alert.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>

assets/triangle-dashed.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-dashed-icon lucide-triangle-dashed"><path d="M10.17 4.193a2 2 0 0 1 3.666.013"/><path d="M14 21h2"/><path d="m15.874 7.743 1 1.732"/><path d="m18.849 12.952 1 1.732"/><path d="M21.824 18.18a2 2 0 0 1-1.835 2.824"/><path d="M4.024 21a2 2 0 0 1-1.839-2.839"/><path d="m5.136 12.952-1 1.732"/><path d="M8 21h2"/><path d="m8.102 7.743-1 1.732"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-dashed-icon lucide-triangle-dashed"><path d="M10.17 4.193a2 2 0 0 1 3.666.013"/><path d="M14 21h2"/><path d="m15.874 7.743 1 1.732"/><path d="m18.849 12.952 1 1.732"/><path d="M21.824 18.18a2 2 0 0 1-1.835 2.824"/><path d="M4.024 21a2 2 0 0 1-1.839-2.839"/><path d="m5.136 12.952-1 1.732"/><path d="M8 21h2"/><path d="m8.102 7.743-1 1.732"/></svg>

assets/triangle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>

modules/bar/components/Workspace.qml

@@ -1,7 +1,9 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Effects
 import Quickshell.Hyprland
 import "../../../config"
+import "../../../styled/"
 
 Item {
     id: workspace
@@ -20,7 +22,7 @@ Item {
         radius: Dimensions.radius
         states: State {
             name: "hovered"
-            when: button.hovered
+            when: mouseArea.containsMouse
             PropertyChanges {
                 rectangle {
                     color: Theme.palette.primary
@@ -39,25 +41,21 @@ Item {
         }
     }
 
-    Button {
-        id: button
+    Icon {
+        id: icon
+
+        source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg"
+
         anchors.centerIn: parent
-
-        verticalPadding: Dimensions.workspace.verticalPadding
-        horizontalPadding: Dimensions.workspace.horizontalPadding
-
-        background: undefined
-
-        icon.source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg"
-        icon.color: Theme.palette.basecontent
+        size: Dimensions.workspace.iconSize
 
         states: State {
             name: "active"
             when: workspace.modelData.active
             PropertyChanges {
-                button {
+                icon {
                     rotation: 180
-                    icon.color: button.hovered ? Theme.palette.basecontent : Theme.palette.primary
+                    color: mouseArea.containsMouse ? Theme.palette.basecontent : Theme.palette.primary
                 }
             }
         }
@@ -85,6 +83,7 @@ Item {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
 
+        hoverEnabled: true
         onClicked: workspace.modelData.activate()
     }
 }

styled/Icon.qml

@@ -0,0 +1,21 @@
+import QtQuick
+import QtQuick.Effects
+import "../config/"
+
+Image {
+    id: root
+
+    property int size: 18
+    property color color: Theme.palette.basecontent
+
+    width: size
+    height: size
+
+    MultiEffect {
+        id: effect
+        source: root
+        anchors.fill: root
+        colorization: 1.0
+        colorizationColor: color
+    }
+}