Svg and icon support

native/src/widget.rs

@@ -24,6 +24,7 @@ pub mod button;
 pub mod checkbox;
 pub mod column;
 pub mod container;
+pub mod icon;
 pub mod image;
 pub mod radio;
 pub mod row;
@@ -41,6 +42,8 @@ pub use column::Column;
 #[doc(no_inline)]
 pub use container::Container;
 #[doc(no_inline)]
+pub use icon::Icon;
+#[doc(no_inline)]
 pub use image::Image;
 #[doc(no_inline)]
 pub use radio::Radio;

native/src/widget/icon.rs

@@ -0,0 +1,100 @@
+//! Display an icon.
+use crate::{
+    layout, Element, Hasher, Layout, Length, Point, Rectangle, Widget,
+};
+
+use std::{
+    hash::Hash,
+    path::{Path, PathBuf},
+};
+
+/// A simple icon_loader widget.
+#[derive(Debug, Clone)]
+pub struct Icon {
+    path: PathBuf,
+    size: Length,
+}
+
+impl Icon {
+    /// Create a new [`Icon`] from the file at `path`.
+    ///
+    /// [`Icon`]: struct.Icon.html
+    pub fn new(path: impl Into<PathBuf>) -> Self {
+        Icon {
+            path: path.into(),
+            size: Length::Fill,
+        }
+    }
+
+    /// Sets the size of the [`Icon`].
+    ///
+    /// [`Icon`]: struct.Icon.html
+    pub fn size(mut self, size: Length) -> Self {
+        self.size = size;
+        self
+    }
+}
+
+impl<Message, Renderer> Widget<Message, Renderer> for Icon
+where
+    Renderer: self::Renderer,
+{
+    fn width(&self) -> Length {
+        self.size
+    }
+
+    fn height(&self) -> Length {
+        self.size
+    }
+
+    fn layout(&self, _: &Renderer, limits: &layout::Limits) -> layout::Node {
+        let mut size = limits.width(self.size).height(self.size).max();
+
+        if size.width > size.height {
+            size.width = size.height;
+        } else if size.width < size.height {
+            size.height = size.width;
+        }
+
+        layout::Node::new(size)
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout<'_>,
+        _cursor_position: Point,
+    ) -> Renderer::Output {
+        let bounds = layout.bounds();
+
+        renderer.draw(bounds, self.path.as_path())
+    }
+
+    fn hash_layout(&self, state: &mut Hasher) {
+        self.size.hash(state);
+    }
+}
+
+/// The renderer of an [`Icon`].
+///
+/// Your [renderer] will need to implement this trait before being
+/// able to use [`Icon`] in your [`UserInterface`].
+///
+/// [`Icon`]: struct.Icon.html
+/// [renderer]: ../../renderer/index.html
+/// [`UserInterface`]: ../../struct.UserInterface.html
+pub trait Renderer: crate::Renderer {
+    /// Draws an [`Icon`].
+    ///
+    /// [`Icon`]: struct.Icon.html
+    fn draw(&mut self, bounds: Rectangle, path: &Path) -> Self::Output;
+}
+
+impl<'a, Message, Renderer> From<Icon> for Element<'a, Message, Renderer>
+where
+    Renderer: self::Renderer,
+{
+    fn from(icon: Icon) -> Element<'a, Message, Renderer> {
+        Element::new(icon)
+    }
+}

src/native.rs

@@ -80,12 +80,17 @@ pub mod widget {
         pub use iced_winit::image::{Handle, Image};
     }
 
+    pub mod icon {
+        //! Display icons in your user interface.
+        pub use iced_winit::icon::Icon;
+    }
+
     pub use iced_winit::{Checkbox, Radio, Text};
 
     #[doc(no_inline)]
     pub use {
-        button::Button, image::Image, scrollable::Scrollable, slider::Slider,
-        text_input::TextInput,
+        button::Button, icon::Icon, image::Image, scrollable::Scrollable,
+        slider::Slider, text_input::TextInput,
     };
 
     /// A container that distributes its contents vertically.

wgpu/Cargo.toml

@@ -17,3 +17,4 @@ image = "0.22"
 glam = "0.8"
 font-kit = "0.4"
 log = "0.4"
+resvg = { version = "0.8", features = ["raqote-backend"] }

wgpu/src/lib.rs

@@ -28,11 +28,13 @@ mod image;
 mod primitive;
 mod quad;
 mod renderer;
+mod svg;
 mod text;
 mod transformation;
 
 pub(crate) use crate::image::Image;
 pub(crate) use quad::Quad;
+pub(crate) use svg::Svg;
 pub(crate) use transformation::Transformation;
 
 pub use primitive::Primitive;

wgpu/src/primitive.rs

@@ -46,6 +46,13 @@ pub enum Primitive {
         /// The bounds of the image
         bounds: Rectangle,
     },
+    /// A svg icon primitive
+    Svg {
+        /// The path of the icon
+        handle: crate::svg::Handle,
+        /// The bounds of the icon
+        bounds: Rectangle,
+    },
     /// A clip primitive
     Clip {
         /// The bounds of the clip

wgpu/src/renderer.rs

@@ -1,4 +1,4 @@
-use crate::{quad, text, Image, Primitive, Quad, Transformation};
+use crate::{quad, text, Image, Primitive, Quad, Svg, Transformation};
 use iced_native::{
     renderer::{Debugger, Windowed},
     Background, Color, Layout, MouseCursor, Point, Rectangle, Vector, Widget,
@@ -23,6 +23,7 @@ pub struct Renderer {
     queue: Queue,
     quad_pipeline: quad::Pipeline,
     image_pipeline: crate::image::Pipeline,
+    svg_pipeline: crate::svg::Pipeline,
     text_pipeline: text::Pipeline,
 }
 
@@ -31,6 +32,7 @@ struct Layer<'a> {
     offset: Vector<u32>,
     quads: Vec<Quad>,
     images: Vec<Image>,
+    svgs: Vec<Svg>,
     text: Vec<wgpu_glyph::Section<'a>>,
 }
 
@@ -41,6 +43,7 @@ impl<'a> Layer<'a> {
             offset,
             quads: Vec::new(),
             images: Vec::new(),
+            svgs: Vec::new(),
             text: Vec::new(),
         }
     }
@@ -64,12 +67,14 @@ impl Renderer {
         let text_pipeline = text::Pipeline::new(&mut device);
         let quad_pipeline = quad::Pipeline::new(&mut device);
         let image_pipeline = crate::image::Pipeline::new(&mut device);
+        let svg_pipeline = crate::svg::Pipeline::new(&mut device);
 
         Self {
             device,
             queue,
             quad_pipeline,
             image_pipeline,
+            svg_pipeline,
             text_pipeline,
         }
     }
@@ -128,6 +133,7 @@ impl Renderer {
 
         self.queue.submit(&[encoder.finish()]);
         self.image_pipeline.trim_cache();
+        self.svg_pipeline.trim_cache();
 
         *mouse_cursor
     }
@@ -237,6 +243,11 @@ impl Renderer {
                     scale: [bounds.width, bounds.height],
                 });
             }
+            Primitive::Svg { handle, bounds } => layer.svgs.push(Svg {
+                handle: handle.clone(),
+                position: [bounds.x, bounds.y],
+                scale: [bounds.width, bounds.height],
+            }),
             Primitive::Clip {
                 bounds,
                 offset,
@@ -345,6 +356,25 @@ impl Renderer {
             );
         }
 
+        if layer.svgs.len() > 0 {
+            let translated = transformation
+                * Transformation::translate(
+                    -(layer.offset.x as f32),
+                    -(layer.offset.y as f32),
+                );
+
+            self.svg_pipeline.draw(
+                &mut self.device,
+                encoder,
+                &layer.svgs,
+                translated,
+                bounds,
+                target,
+                (dpi * 96.0) as u16,
+                (dpi * 20.0) as u16,
+            );
+        }
+
         if layer.text.len() > 0 {
             for text in layer.text.iter() {
                 // Target physical coordinates directly to avoid blurry text

wgpu/src/renderer/widget.rs

@@ -1,6 +1,7 @@
 mod button;
 mod checkbox;
 mod column;
+mod icon;
 mod image;
 mod radio;
 mod row;

wgpu/src/renderer/widget/icon.rs

@@ -0,0 +1,15 @@
+use crate::{svg::Handle, Primitive, Renderer};
+use iced_native::{icon, MouseCursor, Rectangle};
+use std::path::Path;
+
+impl icon::Renderer for Renderer {
+    fn draw(&mut self, bounds: Rectangle, path: &Path) -> Self::Output {
+        (
+            Primitive::Svg {
+                handle: Handle::from_path(path),
+                bounds,
+            },
+            MouseCursor::OutOfBounds,
+        )
+    }
+}