✨ feat: update leptos

Cargo.toml

@@ -13,18 +13,16 @@ license = "MIT"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [
-    "stable",
-] }
+leptos = { version = "0.4.0", features = ["csr"] }
 stylers = "0.3.1"
 web-sys = { version = "0.3.62", features = ["DomRect"] }
-leptos_dom = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc" }
-leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = [
+leptos_dom = { version = "0.4.0" }
+wasm-bindgen = "0.2.85"
+icondata = { version = "0.0.7", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
     "AiLeftOutlined",
 ] }
-wasm-bindgen = "0.2.85"
 
 [workspace]
-members = ["examples/basic", "gh-pages"]
+members = ["examples/basic", "examples/min", "gh-pages"]

examples/basic/Cargo.toml

@@ -6,11 +6,11 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [
-    "stable",
-] }
+leptos = { version = "0.4.0", features = ["csr"] }
 melt-ui = { path = "../../" }
-leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = ["AiCloseOutlined", "AiCheckOutlined"] }
-leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = ["csr"] }
-
-regex = "1.8.2"
+icondata = { version = "0.0.7", features = [
+    "AiCloseOutlined",
+    "AiCheckOutlined",
+] }
+leptos_router = { version = "0.4.0", features = ["csr"] }
+regex = "1.8.2"

examples/basic/src/pages/button/mod.rs

@@ -29,10 +29,10 @@ pub fn ButtonPage(cx: Scope) -> impl IntoView {
             <Button color=ButtonColor::ERROR>
                 "ERROR Color"
             </Button>
-            <Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined>
+            <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
                 "ERROR Color Icon"
             </Button>
-            <Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
+            <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
             </Button>
         </Space>
         <div style="padding-top: 12px">

examples/basic/src/pages/tabbar/mod.rs

@@ -14,7 +14,7 @@ pub fn TabbarPage(cx: Scope) -> impl IntoView {
                 <TabbarItem name="i">
                     "if"
                 </TabbarItem> 
-                <TabbarItem name="o" icon=leptos_icons::AiIcon::AiCloseOutlined>
+                <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
                     "or"
                 </TabbarItem> 
             </Tabbar>

gh-pages/Cargo.toml

@@ -6,16 +6,12 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [
-    "stable",
-] }
+leptos = { version = "0.4.0", features = ["csr"] }
 melt-ui = { path = "../" }
-leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = [
+icondata = { version = "0.0.7", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
 ] }
-leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [
-    "csr",
-] }
+leptos_router = { version = "0.4.0", features = ["csr"] }
 indoc = "2.0.1"
 regex = "1.8.2"

gh-pages/src/pages/button/mod.rs

@@ -29,15 +29,15 @@ pub fn ButtonPage(cx: Scope) -> impl IntoView {
             <Button color=ButtonColor::ERROR>
                 "ERROR Color"
             </Button>
-            <Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined>
+            <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
                 "ERROR Color Icon"
             </Button>
-            <Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
+            <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
             </Button>
         </Space>
         <div style="padding-top: 12px">
             <Button style="background: blue;">"style blue"</Button>
             <Button style="width: 40px; height: 20px">"size"</Button>
         </div>
     }
-}
+}

gh-pages/src/pages/tabbar/mod.rs

@@ -14,7 +14,7 @@ pub fn TabbarPage(cx: Scope) -> impl IntoView {
                 <TabbarItem name="i">
                     "if"
                 </TabbarItem> 
-                <TabbarItem name="o" icon=leptos_icons::AiIcon::AiCloseOutlined>
+                <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
                     "or"
                 </TabbarItem> 
             </Tabbar>

src/button/mod.rs

@@ -1,7 +1,6 @@
 mod theme;
-use crate::{components::*, theme::*, utils::mount_style::mount_style};
+use crate::{components::*, icon::*, theme::*, utils::mount_style::mount_style};
 use leptos::*;
-use leptos_icons::*;
 use stylers::style_sheet_str;
 pub use theme::ButtonTheme;
 

src/checkbox/mod.rs

@@ -1,6 +1,6 @@
-use crate::{theme::use_theme, utils::mount_style::mount_style, Theme, components::*};
+use crate::{components::*, icon::*, theme::use_theme, utils::mount_style::mount_style, Theme};
+use icondata::AiIcon;
 use leptos::*;
-use leptos_icons::*;
 use stylers::style_sheet_str;
 
 #[component]
@@ -29,7 +29,7 @@ pub fn Checkbox(
             <div class="melt-checkbox__dot">
                 <If cond=checked>
                     <Then slot>
-                        <Icon icon=AiIcon::AiCheckOutlined style="color: white"/>
+                        <Icon icon=Icon::from(AiIcon::AiCheckOutlined) style="color: white"/>
                     </Then>
                 </If>
             </div>

src/icon/mod.rs

@@ -0,0 +1,83 @@
+// copy https://github.com/Carlosted/leptos-icons
+// leptos updated version causes leptos_icons error
+pub use icondata::*;
+use leptos::SignalGet;
+
+/// The Icon component.
+#[leptos::component]
+pub fn Icon(
+    cx: leptos::Scope,
+    /// The icon to show.
+    #[prop(into)]
+    icon: leptos::MaybeSignal<Icon>,
+    /// The width of the icon (horizontal side length of the square surrounding the icon). Defaults to "1em".
+    #[prop(into, optional)]
+    width: Option<leptos::MaybeSignal<String>>,
+    /// The height of the icon (vertical side length of the square surrounding the icon). Defaults to "1em".
+    #[prop(into, optional)]
+    height: Option<leptos::MaybeSignal<String>>,
+    /// HTML class attribute.
+    #[prop(into, optional)]
+    class: Option<leptos::MaybeSignal<String>>,
+    /// HTML style attribute.
+    #[prop(into, optional)]
+    style: Option<leptos::MaybeSignal<String>>,
+) -> impl leptos::IntoView {
+    let icon: IconData = icon.get().into();
+
+    let mut svg = leptos::svg::svg(cx);
+    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),
+        (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);
+    }
+    // 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), Some(_b)) => std::borrow::Cow::from(a.get()),
+            (Some(a), None) => std::borrow::Cow::from(a.get()),
+            (None, Some(_b)) => std::borrow::Cow::from("1em"),
+            (None, None) => std::borrow::Cow::from("1em"),
+        }),
+    );
+    svg = svg.attr(
+        "height",
+        leptos::Attribute::String(match (height, icon.height) {
+            (Some(a), Some(_b)) => std::borrow::Cow::from(a.get()),
+            (Some(a), None) => std::borrow::Cow::from(a.get()),
+            (None, Some(_b)) => std::borrow::Cow::from("1em"),
+            (None, None) => std::borrow::Cow::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, cx)
+}

src/lib.rs

@@ -3,6 +3,7 @@ mod card;
 mod checkbox;
 mod code;
 mod components;
+mod icon;
 mod image;
 mod input;
 mod layout;
@@ -24,6 +25,7 @@ pub use button::*;
 pub use card::*;
 pub use checkbox::*;
 pub use code::*;
+pub use icon::*;
 pub use image::*;
 pub use input::*;
 pub use layout::*;

src/mobile/nav_bar/mod.rs

@@ -1,6 +1,5 @@
-use crate::{utils::mount_style::mount_style, components::*};
+use crate::{components::*, icon::*, utils::mount_style::mount_style};
 use leptos::*;
-use leptos_icons::*;
 use stylers::style_sheet_str;
 use web_sys::MouseEvent;
 
@@ -13,9 +12,10 @@ pub fn NavBar(
     #[prop(optional, into)] click_left: Option<SignalSetter<MouseEvent>>,
     #[prop(optional, into)] right_text: MaybeSignal<&'static str>,
     #[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
-
 ) -> impl IntoView {
-    let class_name = mount_style("nav-bar", || style_sheet_str!("./src/mobile/nav_bar/nav-bar.css"));
+    let class_name = mount_style("nav-bar", || {
+        style_sheet_str!("./src/mobile/nav_bar/nav-bar.css")
+    });
 
     let onclick_left = move |ev| {
         if let Some(click_left) = click_left {
@@ -35,7 +35,7 @@ pub fn NavBar(
                     <div class="melt-nav-bar__left" on:click=onclick_left>
                         <If cond=left_arrow>
                             <Then slot>
-                                <Icon icon=AiIcon::AiLeftOutlined/>
+                                <Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
                             </Then>
                         </If>
                         { left_text.get() }
@@ -51,7 +51,7 @@ pub fn NavBar(
                         { right_text.get() }
                     </div>
                 </Then>
-            </If>            
+            </If>
         </div>
     }
-}
+}

src/mobile/tabbar/tabbar_item.rs

@@ -1,9 +1,8 @@
 use super::{use_tabbar, TabbarInjectionKey};
-use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
+use crate::components::*;
+use crate::{icon::*, theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
 use stylers::style_sheet_str;
-use crate::components::*;
-use leptos_icons::*;
 
 #[component]
 pub fn TabbarItem(
@@ -12,7 +11,9 @@ pub fn TabbarItem(
     #[prop(optional, into)] icon: Option<Icon>,
     children: Children,
 ) -> impl IntoView {
-    let class_name = mount_style("tabbar-item", || style_sheet_str!("./src/mobile/tabbar/tabbar-item.css"));
+    let class_name = mount_style("tabbar-item", || {
+        style_sheet_str!("./src/mobile/tabbar/tabbar-item.css")
+    });
     let theme = use_theme(cx, Theme::light);
     let tabbar = use_tabbar(cx);
     let onclick_select = move |_| {

src/modal/mod.rs

@@ -1,10 +1,10 @@
 use crate::card::*;
 use crate::components::OptionComp;
+use crate::icon::*;
 use crate::teleport::*;
 use crate::utils::mount_style::mount_style;
 use leptos::*;
 use stylers::style_sheet_str;
-use leptos_icons::*;
 
 #[slot]
 pub struct ModalFooter {
@@ -35,7 +35,7 @@ pub fn Modal(
                         </CardHeader>
                         <CardHeaderExtra slot>
                             <span style="cursor: pointer;" on:click=move |_| show.set(false)>
-                                <Icon icon=AiIcon::AiCloseOutlined/>
+                                <Icon icon=Icon::from(AiIcon::AiCloseOutlined)/>
                             </span>
                         </CardHeaderExtra>
                         { children(cx) }