feat: SVG styling with icon fill color

native/src/svg.rs

@@ -6,11 +6,14 @@ use std::hash::{Hash, Hasher as _};
 use std::path::PathBuf;
 use std::sync::Arc;
 
+pub use iced_style::svg::{Appearance, StyleSheet};
+
 /// A handle of Svg data.
 #[derive(Debug, Clone)]
 pub struct Handle {
     id: u64,
     data: Arc<Data>,
+    appearance: Appearance,
 }
 
 impl Handle {
@@ -36,6 +39,7 @@ impl Handle {
         Handle {
             id: hasher.finish(),
             data: Arc::new(data),
+            appearance: Appearance::default(),
         }
     }
 
@@ -48,6 +52,16 @@ impl Handle {
     pub fn data(&self) -> &Data {
         &self.data
     }
+
+    /// Returns the styling [`Appearance`] for the SVG.
+    pub fn appearance(&self) -> Appearance {
+        self.appearance
+    }
+
+    /// Set the [`Appearance`] for the SVG.
+    pub fn set_appearance(&mut self, appearance: Appearance) {
+        self.appearance = appearance;
+    }
 }
 
 impl Hash for Handle {

native/src/widget/helpers.rs

@@ -285,6 +285,12 @@ where
 ///
 /// [`Svg`]: widget::Svg
 /// [`Handle`]: widget::svg::Handle
-pub fn svg(handle: impl Into<widget::svg::Handle>) -> widget::Svg {
+pub fn svg<Renderer>(
+    handle: impl Into<widget::svg::Handle>,
+) -> widget::Svg<Renderer>
+where
+    Renderer: crate::svg::Renderer,
+    Renderer::Theme: crate::svg::StyleSheet,
+{
     widget::Svg::new(handle)
 }

native/src/widget/svg.rs

@@ -9,7 +9,7 @@ use crate::{
 
 use std::path::PathBuf;
 
-pub use svg::Handle;
+pub use svg::{Handle, StyleSheet};
 
 /// A vector graphics image.
 ///
@@ -17,15 +17,25 @@ pub use svg::Handle;
 ///
 /// [`Svg`] images can have a considerable rendering cost when resized,
 /// specially when they are complex.
-#[derive(Debug, Clone)]
-pub struct Svg {
+#[derive(Clone)]
+#[allow(missing_debug_implementations)]
+pub struct Svg<Renderer>
+where
+    Renderer: svg::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     handle: Handle,
     width: Length,
     height: Length,
     content_fit: ContentFit,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl Svg {
+impl<Renderer> Svg<Renderer>
+where
+    Renderer: svg::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     /// Creates a new [`Svg`] from the given [`Handle`].
     pub fn new(handle: impl Into<Handle>) -> Self {
         Svg {
@@ -33,22 +43,26 @@ impl Svg {
             width: Length::Fill,
             height: Length::Shrink,
             content_fit: ContentFit::Contain,
+            style: Default::default(),
         }
     }
 
     /// Creates a new [`Svg`] that will display the contents of the file at the
     /// provided path.
+    #[must_use]
     pub fn from_path(path: impl Into<PathBuf>) -> Self {
         Self::new(Handle::from_path(path))
     }
 
     /// Sets the width of the [`Svg`].
+    #[must_use]
     pub fn width(mut self, width: Length) -> Self {
         self.width = width;
         self
     }
 
     /// Sets the height of the [`Svg`].
+    #[must_use]
     pub fn height(mut self, height: Length) -> Self {
         self.height = height;
         self
@@ -57,17 +71,29 @@ impl Svg {
     /// Sets the [`ContentFit`] of the [`Svg`].
     ///
     /// Defaults to [`ContentFit::Contain`]
+    #[must_use]
     pub fn content_fit(self, content_fit: ContentFit) -> Self {
         Self {
             content_fit,
             ..self
         }
     }
+
+    /// Sets the style variant of this [`Svg`].
+    #[must_use]
+    pub fn style(
+        mut self,
+        style: <Renderer::Theme as StyleSheet>::Style,
+    ) -> Self {
+        self.style = style;
+        self
+    }
 }
 
-impl<Message, Renderer> Widget<Message, Renderer> for Svg
+impl<Message, Renderer> Widget<Message, Renderer> for Svg<Renderer>
 where
     Renderer: svg::Renderer,
+    Renderer::Theme: iced_style::svg::StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -114,12 +140,15 @@ where
         &self,
         _state: &Tree,
         renderer: &mut Renderer,
-        _theme: &Renderer::Theme,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
         _viewport: &Rectangle,
     ) {
+        let mut handle = self.handle.clone();
+        handle.set_appearance(theme.appearance(self.style));
+
         let Size { width, height } = renderer.dimensions(&self.handle);
         let image_size = Size::new(width as f32, height as f32);
 
@@ -138,7 +167,7 @@ where
                 ..bounds
             };
 
-            renderer.draw(self.handle.clone(), drawing_bounds + offset)
+            renderer.draw(handle, drawing_bounds + offset);
         };
 
         if adjusted_fit.width > bounds.width
@@ -146,16 +175,18 @@ where
         {
             renderer.with_layer(bounds, render);
         } else {
-            render(renderer)
+            render(renderer);
         }
     }
 }
 
-impl<'a, Message, Renderer> From<Svg> for Element<'a, Message, Renderer>
+impl<'a, Message, Renderer> From<Svg<Renderer>>
+    for Element<'a, Message, Renderer>
 where
-    Renderer: svg::Renderer,
+    Renderer: svg::Renderer + 'a,
+    Renderer::Theme: iced_style::svg::StyleSheet,
 {
-    fn from(icon: Svg) -> Element<'a, Message, Renderer> {
+    fn from(icon: Svg<Renderer>) -> Element<'a, Message, Renderer> {
         Element::new(icon)
     }
 }