chore(examples): Add svg-style example

3 files changed, 89 insertions, 0 deletions

diff --git a/examples/svg_style/Cargo.toml b/examples/svg_style/Cargo.toml
new file mode 100644
index 00000000..9ecda7c4
--- /dev/null
+++ b/examples/svg_style/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "svg_style"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+iced = { path = "../..", features = ["svg"] }
+iced_style = { path = "../../style" }
\ No newline at end of file
diff --git a/examples/svg_style/resources/go-next-symbolic.svg b/examples/svg_style/resources/go-next-symbolic.svg
new file mode 100644
index 00000000..79c456b7
--- /dev/null
+++ b/examples/svg_style/resources/go-next-symbolic.svg
@@ -0,0 +1 @@
+<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path color='#bebebe' d='M0 0h16v16H0z' fill='gray' fill-opacity='.01'/><path d='m7.94 1.94 6.062 6.063-6.062 6.063c-1.438 1.437-2.688-.063-1.625-1.125l4.937-4.938-4.937-4.937C5.502 2.253 6.752.753 7.94 1.94z' fill='#232323'/></svg>
diff --git a/examples/svg_style/src/main.rs b/examples/svg_style/src/main.rs
new file mode 100644
index 00000000..905e1d86
--- /dev/null
+++ b/examples/svg_style/src/main.rs
@@ -0,0 +1,78 @@
+use iced::widget::{container, svg};
+use iced::{Color, Element, Length, Sandbox, Settings};
+use iced_style::svg::Appearance;
+use iced_style::theme::{self, Theme};
+
+pub fn main() -> iced::Result {
+    SvgStyleExample::run(Settings::default())
+}
+
+struct SvgStyleExample;
+
+impl Sandbox for SvgStyleExample {
+    type Message = ();
+
+    fn new() -> Self {
+        SvgStyleExample
+    }
+
+    fn theme(&self) -> Theme {
+        Theme::Light
+    }
+
+    fn title(&self) -> String {
+        String::from("SVG - Iced")
+    }
+
+    fn update(&mut self, _message: ()) {}
+
+    fn view(&self) -> Element<()> {
+        let svg1: Element<_> = svg(svg::Handle::from_path(format!(
+            "{}/resources/go-next-symbolic.svg",
+            env!("CARGO_MANIFEST_DIR")
+        )))
+        .width(Length::Fill)
+        .height(Length::Fill)
+        .into();
+
+        let svg2: Element<_> = svg(svg::Handle::from_path(format!(
+            "{}/resources/go-next-symbolic.svg",
+            env!("CARGO_MANIFEST_DIR")
+        )))
+        .style(theme::Svg::Custom(|_theme| Appearance {
+            fill: Some(Color {
+                r: 0.0,
+                g: 0.28627452,
+                b: 0.42745098,
+                a: 1.0,
+            }),
+        }))
+        .width(Length::Fill)
+        .height(Length::Fill)
+        .into();
+
+        let svg3: Element<_> = svg(svg::Handle::from_path(format!(
+            "{}/resources/go-next-symbolic.svg",
+            env!("CARGO_MANIFEST_DIR")
+        )))
+        .style(theme::Svg::Custom(|_theme| Appearance {
+            fill: Some(Color {
+                r: 0.5803922,
+                g: 0.92156863,
+                b: 0.92156863,
+                a: 1.0,
+            }),
+        }))
+        .width(Length::Fill)
+        .height(Length::Fill)
+        .into();
+
+        container(iced::widget::row!(svg1, svg2, svg3))
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .padding(20)
+            .center_x()
+            .center_y()
+            .into()
+    }
+}