Merge pull request #155 from Noah4ever/feat/toolbar-svg-icons

devmobasa · web-flow · commit 0ac99d347345 · 2026-02-26T22:29:44.000+01:00
feat(toolbar): switch tool icons to embedded SVGs
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -22,6 +22,10 @@ calloop = "0.14"
 cairo-rs = { version = "0.21", features = ["png"] }
 cairo-sys-rs = "0.21"
 
+# SVG icon rendering
+resvg = "0.44"
+tiny-skia = "0.11"
+
 # Pango for advanced text rendering and font support
 pango = "0.21"
 pangocairo = "0.21"
diff --git a/assets/icons/arrow-up-right.svg b/assets/icons/arrow-up-right.svg
@@ -0,0 +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-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
diff --git a/assets/icons/circle.svg b/assets/icons/circle.svg
@@ -0,0 +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-circle-icon lucide-circle"><circle cx="12" cy="12" r="10"/></svg>
diff --git a/assets/icons/eraser.svg b/assets/icons/eraser.svg
@@ -0,0 +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-eraser-icon lucide-eraser"><path d="M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21"/><path d="m5.082 11.09 8.828 8.828"/></svg>
diff --git a/assets/icons/highlighter.svg b/assets/icons/highlighter.svg
@@ -0,0 +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-highlighter-icon lucide-highlighter"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>
diff --git a/assets/icons/list-ordered.svg b/assets/icons/list-ordered.svg
@@ -0,0 +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-list-ordered-icon lucide-list-ordered"><path d="M11 5h10"/><path d="M11 12h10"/><path d="M11 19h10"/><path d="M4 4h1v5"/><path d="M4 9h2"/><path d="M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"/></svg>
diff --git a/assets/icons/minus.svg b/assets/icons/minus.svg
@@ -0,0 +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-minus-icon lucide-minus"><path d="M5 12h14"/></svg>
diff --git a/assets/icons/mouse-pointer-click.svg b/assets/icons/mouse-pointer-click.svg
@@ -0,0 +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-mouse-pointer-click-icon lucide-mouse-pointer-click"><path d="M14 4.1 12 6"/><path d="m5.1 8-2.9-.8"/><path d="m6 12-1.9 2"/><path d="M7.2 2.2 8 5.1"/><path d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"/></svg>
diff --git a/assets/icons/mouse-pointer.svg b/assets/icons/mouse-pointer.svg
@@ -0,0 +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-mouse-pointer-icon lucide-mouse-pointer"><path d="M12.586 12.586 19 19"/><path d="M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"/></svg>
diff --git a/assets/icons/pen-tool.svg b/assets/icons/pen-tool.svg
@@ -0,0 +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-pen-tool-icon lucide-pen-tool"><path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z"/><path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18"/><path d="m2.3 2.3 7.286 7.286"/><circle cx="11" cy="11" r="2"/></svg>
diff --git a/assets/icons/pen.svg b/assets/icons/pen.svg
@@ -0,0 +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-pen-icon lucide-pen"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>
diff --git a/assets/icons/rectangle-horizontal.svg b/assets/icons/rectangle-horizontal.svg
@@ -0,0 +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-rectangle-horizontal-icon lucide-rectangle-horizontal"><rect width="20" height="12" x="2" y="6" rx="2"/></svg>
diff --git a/assets/icons/sticky-note.svg b/assets/icons/sticky-note.svg
@@ -0,0 +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-sticky-note-icon lucide-sticky-note"><path d="M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z"/><path d="M15 3v5a1 1 0 0 0 1 1h5"/></svg>
diff --git a/assets/icons/type.svg b/assets/icons/type.svg
@@ -0,0 +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-type-icon lucide-type"><path d="M12 4v16"/><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"/><path d="M9 20h6"/></svg>
diff --git a/src/toolbar_icons/mod.rs b/src/toolbar_icons/mod.rs
@@ -1,11 +1,14 @@
 //! Icon drawing functions for the toolbar UI.
 //!
-//! All icons are drawn using Cairo paths for perfect scaling at any DPI.
+//! Tool icons are rendered from embedded SVG files (see `svg` module).
+//! Other icons (actions, controls, history, zoom, security) still use
+//! procedural Cairo paths.
 
 mod actions;
 mod controls;
 mod history;
 mod security;
+pub(crate) mod svg;
 mod tools;
 mod zoom;
 
diff --git a/src/toolbar_icons/svg.rs b/src/toolbar_icons/svg.rs
@@ -0,0 +1,181 @@
+//! SVG icon rendering via resvg.
+//!
+//! SVG icons are embedded at compile time and lazily rasterized.
+//! Rendered surfaces are cached per pixel-size so only the first draw at a
+//! given size incurs the resvg rasterization cost.  Icons are painted via
+//! [`cairo::Context::mask_surface`] so they automatically inherit the callers
+//! current source color.
+
+use cairo::{Context, Format, ImageSurface};
+use std::collections::HashMap;
+use std::sync::{LazyLock, Mutex};
+
+// Cached render entry
+struct CachedRender {
+    /// Pre-converted Cairo ARGB32 pixel data (native byte-order, premultiplied).
+    data: Vec<u8>,
+    width: i32,
+    height: i32,
+    stride: i32,
+}
+
+// Parsed + cached SVG icon
+struct SvgIcon {
+    tree: resvg::usvg::Tree,
+    /// Per-pixel-size cache of rasterised data. The `Mutex` is uncontended in
+    /// practice because the Wayland event loop is single-threaded.
+    cache: Mutex<HashMap<u32, CachedRender>>,
+}
+
+impl SvgIcon {
+    fn parse(svg_data: &str) -> Self {
+        let tree =
+            resvg::usvg::Tree::from_str(svg_data, &resvg::usvg::Options::default())
+                .expect("embedded SVG must be valid");
+        Self {
+            tree,
+            cache: Mutex::new(HashMap::new()),
+        }
+    }
+
+    /// Render this icon into ctx at (`x`, `y`) with the given square
+    /// `size`. The icon is painted using the context's current source color
+    fn render(&self, ctx: &Context, x: f64, y: f64, size: f64) {
+        if size <= 0.0 {
+            return;
+        }
+        let px = size.ceil() as u32;
+        if let Some(surface) = self.surface_for(px) {
+            let _ = ctx.mask_surface(&surface, x, y);
+        }
+    }
+
+    /// Return a Cairo ['ImageSurface'] for the requested pixel size, creating
+    /// and caching the rasterised data on first call
+    fn surface_for(&self, px: u32) -> Option<ImageSurface> {
+        let mut cache = self.cache.lock().ok()?;
+        if !cache.contains_key(&px) {
+            cache.insert(px, self.rasterize(px)?);
+        }
+        let c = cache.get(&px)?;
+        ImageSurface::create_for_data(
+            c.data.clone(),
+            Format::ARgb32,
+            c.width,
+            c.height,
+            c.stride,
+        )
+        .ok()
+    }
+
+    /// Rasterize the SVG tree at `px x px` and convert the pixel data from
+    /// tiny-skia premultiplied RGBA to Cairo premultiplied ARGB32 (BGRA on
+    /// little-endian).
+    fn rasterize(&self, px: u32) -> Option<CachedRender> {
+        let mut pixmap = tiny_skia::Pixmap::new(px, px)?;
+
+        let sz = self.tree.size();
+        let sx = px as f32 / sz.width();
+        let sy = px as f32 / sz.height();
+        resvg::render(
+            &self.tree,
+            tiny_skia::Transform::from_scale(sx, sy),
+            &mut pixmap.as_mut(),
+        );
+
+        let stride = Format::ARgb32.stride_for_width(px).ok()? as usize;
+        let w = px as usize;
+        let h = px as usize;
+        let src = pixmap.data();
+        let mut data = vec![0u8; stride * h];
+
+        for row in 0..h {
+            for col in 0..w {
+                let si = (row * w + col) * 4;
+                let di = row * stride + col * 4;
+                // tiny-skia RGBA to Cairo ARGB32 little-endian (BGRA in memory)
+                data[di] = src[si + 2]; // B
+                data[di + 1] = src[si + 1]; // G
+                data[di + 2] = src[si]; // R
+                data[di + 3] = src[si + 3]; // A
+            }
+        }
+
+        Some(CachedRender {
+            data,
+            width: px as i32,
+            height: px as i32,
+            stride: stride as i32,
+        })
+    }
+}
+
+// Embed SVG files and create lazy-parsed statics
+macro_rules! svg_icon {
+    ($name:ident, $path:expr) => {
+        static $name: LazyLock<SvgIcon> =
+            LazyLock::new(|| SvgIcon::parse(include_str!($path)));
+    };
+}
+
+svg_icon!(SELECT,       "../../assets/icons/mouse-pointer.svg");
+svg_icon!(PEN,          "../../assets/icons/pen-tool.svg");
+svg_icon!(LINE,         "../../assets/icons/minus.svg");
+svg_icon!(RECT,         "../../assets/icons/rectangle-horizontal.svg");
+svg_icon!(CIRCLE,       "../../assets/icons/circle.svg");
+svg_icon!(ARROW,        "../../assets/icons/arrow-up-right.svg");
+svg_icon!(ERASER,       "../../assets/icons/eraser.svg");
+svg_icon!(TEXT,         "../../assets/icons/type.svg");
+svg_icon!(NOTE,         "../../assets/icons/sticky-note.svg");
+svg_icon!(HIGHLIGHT,    "../../assets/icons/mouse-pointer-click.svg");
+svg_icon!(MARKER,       "../../assets/icons/highlighter.svg");
+svg_icon!(STEP_MARKER,  "../../assets/icons/list-ordered.svg");
+
+// Render helpers, matching the draw_icon_* signatures
+pub fn render_select(ctx: &Context, x: f64, y: f64, size: f64) {
+    SELECT.render(ctx, x, y, size);
+}
+
+pub fn render_pen(ctx: &Context, x: f64, y: f64, size: f64) {
+    PEN.render(ctx, x, y, size);
+}
+
+pub fn render_line(ctx: &Context, x: f64, y: f64, size: f64) {
+    LINE.render(ctx, x, y, size);
+}
+
+pub fn render_rect(ctx: &Context, x: f64, y: f64, size: f64) {
+    RECT.render(ctx, x, y, size);
+}
+
+pub fn render_circle(ctx: &Context, x: f64, y: f64, size: f64) {
+    CIRCLE.render(ctx, x, y, size);
+}
+
+pub fn render_arrow(ctx: &Context, x: f64, y: f64, size: f64) {
+    ARROW.render(ctx, x, y, size);
+}
+
+pub fn render_eraser(ctx: &Context, x: f64, y: f64, size: f64) {
+    ERASER.render(ctx, x, y, size);
+}
+
+pub fn render_text(ctx: &Context, x: f64, y: f64, size: f64) {
+    TEXT.render(ctx, x, y, size);
+}
+
+pub fn render_note(ctx: &Context, x: f64, y: f64, size: f64) {
+    NOTE.render(ctx, x, y, size);
+}
+
+pub fn render_highlight(ctx: &Context, x: f64, y: f64, size: f64) {
+    HIGHLIGHT.render(ctx, x, y, size);
+}
+
+pub fn render_marker(ctx: &Context, x: f64, y: f64, size: f64) {
+    MARKER.render(ctx, x, y, size);
+}
+
+pub fn render_step_marker(ctx: &Context, x: f64, y: f64, size: f64) {
+    STEP_MARKER.render(ctx, x, y, size);
+}
diff --git a/src/toolbar_icons/tools.rs b/src/toolbar_icons/tools.rs
