Add and use Lucide icon font

crates/bevy_editor_styles/src/icons.rs

@@ -0,0 +1,4 @@
+//! Icons
+
+pub const CHEVRON_DOWN: &str = "";
+pub const GRIP_VERTICAL: &str = "";

crates/bevy_editor_styles/src/lib.rs

@@ -1,4 +1,7 @@
 //! Palette plugin for the Bevy Editor. This plugin provides a color palette for the editor's UI.
+
+pub mod icons;
+
 use bevy::{asset::embedded_asset, prelude::*};
 
 /// The Pallet Plugin.
@@ -22,6 +25,8 @@ pub struct Theme {
     pub button: ButtonStyles,
     /// The text styles for the editor.
     pub text: TextStyles,
+    /// The icon styles for the editor.
+    pub icon: IconStyles,
     /// The styles for panes in the editor.
     pub pane: PaneStyles,
     /// The styles for menus in the editor.
@@ -64,6 +69,12 @@ pub struct TextStyles {
     pub font: Handle<Font>,
 }
 
+/// The icon styles for the editor.
+pub struct IconStyles {
+    /// The font for the icons.
+    pub font: Handle<Font>,
+}
+
 /// The styles for panes in the editor.
 pub struct PaneStyles {
     /// The background color of the header of the pane.
@@ -136,6 +147,9 @@ impl FromWorld for Theme {
                 font: asset_server
                     .load("embedded://bevy_editor_styles/assets/fonts/Inter-Regular.ttf"),
             },
+            icon: IconStyles {
+                font: asset_server.load("embedded://bevy_editor_styles/assets/fonts/Lucide.ttf"),
+            },
             pane: PaneStyles {
                 header_background_color: BackgroundColor(Color::oklch(0.3407, 0.0, 0.0)),
                 area_background_color: BackgroundColor(Color::oklch(0.3677, 0.0, 0.0)),

crates/bevy_pane_layout/src/ui.rs

@@ -1,6 +1,6 @@
 use bevy::{prelude::*, window::SystemCursorIcon, winit::cursor::CursorIcon};
 use bevy_context_menu::{ContextMenu, ContextMenuOption};
-use bevy_editor_styles::Theme;
+use bevy_editor_styles::{icons, Theme};
 
 use crate::{
     handlers::*, registry::PaneStructure, Divider, DragState, PaneAreaNode, PaneContentNode,
@@ -51,6 +51,7 @@ pub(crate) fn spawn_pane<'a>(
                 width: Val::Percent(100.),
                 height: Val::Px(27.),
                 align_items: AlignItems::Center,
+                justify_content: JustifyContent::SpaceBetween,
                 flex_shrink: 0.,
                 ..default()
             },
@@ -91,27 +92,38 @@ pub(crate) fn spawn_pane<'a>(
             },
         )
         .with_children(|parent| {
-            // Drop down button for selecting the pane type.
-            // Once a drop down menu is implemented, this will have that added.
-            parent.spawn((
-                Node {
-                    width: Val::Px(31.),
-                    height: Val::Px(19.),
-                    margin: UiRect::right(Val::Px(5.)),
+            parent
+                .spawn(Node {
+                    align_items: AlignItems::Center,
+                    flex_shrink: 0.0,
                     ..default()
-                },
-                theme.button.background_color,
-                theme.button.border_radius,
-            ));
+                })
+                .with_children(|parent| {
+                    // Drop down button for selecting the pane type.
+                    // Once a drop down menu is implemented, this will have that added.
+                    parent.spawn((
+                        Text::new(icons::CHEVRON_DOWN),
+                        TextFont {
+                            font: theme.icon.font.clone(),
+                            font_size: 16.0,
+                            ..default()
+                        },
+                    ));
+                    parent.spawn((
+                        Text::new(format!(" {name}")),
+                        TextFont {
+                            font: theme.text.font.clone(),
+                            font_size: 14.0,
+                            ..default()
+                        },
+                    ));
+                });
+
             parent.spawn((
-                Text::new(name),
+                Text::new(icons::GRIP_VERTICAL),
                 TextFont {
-                    font: theme.text.font.clone(),
-                    font_size: 14.,
-                    ..default()
-                },
-                Node {
-                    flex_shrink: 0.,
+                    font: theme.icon.font.clone(),
+                    font_size: 16.0,
                     ..default()
                 },
             ));