Fix Icon Signal Reactive Tracking (#27)

carloskiki · Sep 24, 2023 · 120961e · 120961e
1 parent 84a3a2b
commit 120961e
Showing 1 changed file with 58 additions and 50 deletions.
diff --git a/src/lib.rs b/src/lib.rs
@@ -46,57 +46,65 @@ pub fn Icon(
     #[prop(into, optional)]
     style: Option<leptos::MaybeSignal<String>>,
 ) -> impl leptos::IntoView {
-    let icon: IconData = icon.get().into();
+    let icon = move || icondata::IconData::from(icon.get());
 
-    let mut svg = leptos::svg::svg();
-    if let Some(classes) = class {
-        svg = svg.classes(classes.get());
-    }
-    // The style set by the user overrides the style set by the icon.
-    svg = match (style, icon.style) {
-        (Some(a), Some(b)) => svg.attr("style", format!("{b} {}", a.get())),
-        (Some(a), None) => svg.attr("style", a.get()),
-        (None, Some(b)) => svg.attr("style", b),
-        _ => svg,
+    let svg = move || {
+        let icon = icon();
+        let mut svg = leptos::svg::svg();
+        if let Some(classes) = class.clone() {
+            svg = svg.classes(classes.get());
+        }
+        let mut svg = match (style.clone(), icon.style) {
+            (Some(a), Some(b)) => svg.attr("style", format!("{b} {}", a.get())),
+            (Some(a), None) => svg.attr("style", a.get()),
+            (None, Some(b)) => svg.attr("style", b),
+            (None, None) => svg,
+        };
+        if let Some(x) = icon.x {
+            svg = svg.attr("x", x);
+        }
+        if let Some(y) = icon.y {
+            svg = svg.attr("x", y);
+        }
+        //// The style set by the user overrides the style set by the icon.
+        // We ignore the width and height attributes of the icon, even if the user hasn't specified any.
+        svg = svg.attr(
+            "width",
+            leptos::Attribute::String(match (width.clone(), icon.width) {
+                (Some(a), Some(_b)) => leptos::Oco::from(a.get()),
+                (Some(a), None) => leptos::Oco::from(a.get()),
+                (None, Some(_b)) => leptos::Oco::from("1em"),
+                (None, None) => leptos::Oco::from("1em"),
+            }),
+        );
+        svg = svg.attr(
+            "height",
+            leptos::Attribute::String(match (height.clone(), icon.height) {
+                (Some(a), Some(_b)) => leptos::Oco::from(a.get()),
+                (Some(a), None) => leptos::Oco::from(a.get()),
+                (None, Some(_b)) => leptos::Oco::from("1em"),
+                (None, None) => leptos::Oco::from("1em"),
+            }),
+        );
+        if let Some(view_box) = icon.view_box {
+            svg = svg.attr("viewBox", view_box);
+        }
+        if let Some(stroke_linecap) = icon.stroke_linecap {
+            svg = svg.attr("stroke-linecap", stroke_linecap);
+        }
+        if let Some(stroke_linejoin) = icon.stroke_linejoin {
+            svg = svg.attr("stroke-linejoin", stroke_linejoin);
+        }
+        if let Some(stroke_width) = icon.stroke_width {
+            svg = svg.attr("stroke-width", stroke_width);
+        }
+        if let Some(stroke) = icon.stroke {
+            svg = svg.attr("stroke", stroke);
+        }
+        svg = svg.attr("fill", icon.fill.unwrap_or("currentColor"));
+        svg = svg.attr("role", "graphics-symbol");
+        svg = svg.inner_html(icon.data);
+        svg
     };
-    if let Some(x) = icon.x {
-        svg = svg.attr("x", x);
-    }
-    if let Some(y) = icon.y {
-        svg = svg.attr("x", y);
-    }
-    // We ignore the width and height attributes of the icon, even if the user hasn't specified any.
-    svg = svg.attr(
-        "width",
-        leptos::Attribute::String(match (width, icon.width) {
-            (Some(a), _b) => leptos::Oco::from(a.get()),
-            _ => leptos::Oco::from("1em"),
-        }),
-    );
-    svg = svg.attr(
-        "height",
-        leptos::Attribute::String(match (height, icon.height) {
-            (Some(a), _b) => leptos::Oco::from(a.get()),
-            _ => leptos::Oco::from("1em"),
-        }),
-    );
-    if let Some(view_box) = icon.view_box {
-        svg = svg.attr("viewBox", view_box);
-    }
-    if let Some(stroke_linecap) = icon.stroke_linecap {
-        svg = svg.attr("stroke-linecap", stroke_linecap);
-    }
-    if let Some(stroke_linejoin) = icon.stroke_linejoin {
-        svg = svg.attr("stroke-linejoin", stroke_linejoin);
-    }
-    if let Some(stroke_width) = icon.stroke_width {
-        svg = svg.attr("stroke-width", stroke_width);
-    }
-    if let Some(stroke) = icon.stroke {
-        svg = svg.attr("stroke", stroke);
-    }
-    svg = svg.attr("fill", icon.fill.unwrap_or("currentColor"));
-    svg = svg.attr("role", "graphics-symbol");
-    svg = svg.inner_html(icon.data);
     leptos::IntoView::into_view(svg)
 }