use lucide icon font

assets/triangle-alert.svg

@@ -1 +0,0 @@
-<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 +0,0 @@
-<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 +0,0 @@
-<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>

config/Theme.qml

@@ -6,6 +6,9 @@ import Quickshell
 Singleton {
     id: root
 
+    property var lucide: FontLoader {
+        source: "../assets/lucide.woff"
+    }
     property string fontFamily: "JetBrainsMono Nerd Font"
     property Palette palette: Palette {}
 

constants/Icons.qml

@@ -0,0 +1,9 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+
+Singleton {
+  property string triangle: "\u{E192}"
+  property string triangleDashed: "\u{E642}"
+}

modules/bar/components/hyprland/Workspace.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import Quickshell.Hyprland
 import "../../../../config"
+import "../../../../constants/"
 import "../../../../styled/"
 
 Loader {
@@ -17,28 +18,43 @@ Loader {
 
         onClicked: modelData.activate()
 
-        Icon {
+        Text {
             id: icon
 
-            source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg"
+            font.family: Theme.lucide.font.family
+            font.pixelSize: Dimensions.workspace.iconSize
+            font.bold: true
+            text: Icons.triangle
+
+            color: Theme.palette.basecontent
 
             anchors.centerIn: parent
-            size: Dimensions.workspace.iconSize
 
-            states: State {
+            states: [
-                name: "active"
+                State {
-                when: modelData.active
+                    name: "focused"
+                    when: modelData.focused
                     PropertyChanges {
                         icon {
                             rotation: 180
                             color: clickable.hovered ? Theme.palette.basecontent : Theme.palette.primary
                         }
                     }
+                },
+                State {
+                    name: "active"
+                    when: modelData.active
+                    PropertyChanges {
+                        icon {
+                            text: Icons.triangleDashed
+                            rotation: 180
+                            color: clickable.hovered ? Theme.palette.basecontent : Theme.palette.primary
                         }
+                    }
+                }
+            ]
 
             transitions: Transition {
-                from: ""
-                to: "active"
                 reversible: true
                 ParallelAnimation {
                     RotationAnimation {