feat: icon componen

Cargo.toml

@@ -16,7 +16,7 @@ license = "MIT"
 leptos = { version = "0.5.1", features = ["csr"] }
 web-sys = { version = "0.3.62", features = ["DomRect"] }
 wasm-bindgen = "0.2.85"
-icondata = { version = "0.0.7", features = [
+icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
     "AiLeftOutlined",
@@ -28,6 +28,7 @@ icondata = { version = "0.0.7", features = [
     "AiPlusOutlined",
     "AiMinusOutlined",
 ] }
+icondata_core = "0.0.2"
 
 [workspace]
 members = ["demo"]

demo/Cargo.toml

@@ -9,7 +9,7 @@ edition = "2021"
 [dependencies]
 leptos = { version = "0.5.1", features = ["csr"] }
 melt-ui = { path = "../" }
-icondata = { version = "0.0.7", features = [
+icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
 ] }

demo/src/app.rs

@@ -32,6 +32,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/card" view=CardPage/>
                     <Route path="/divider" view=DividerPage/>
                     <Route path="/input-number" view=InputNumberPage/>
+                    <Route path="/icon" view=IconPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

demo/src/pages/components.rs

@@ -96,6 +96,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "divider".into(),
                     label: "Divider".into(),
                 },
+                MenuItemOption {
+                    value: "icon".into(),
+                    label: "Icon".into(),
+                },
             ],
         },
         MenuGroupOption {

demo/src/pages/icon/mod.rs

@@ -0,0 +1,34 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use melt_ui::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn IconPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Icon"</h1>
+            <Demo>
+                <Space>
+                    <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined) />
+                    <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined) />
+                </Space>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                <Space>
+                    <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined) />
+                    <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined) />
+                </Space>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

demo/src/pages/mod.rs

@@ -10,6 +10,7 @@ mod components;
 mod divider;
 mod grid;
 mod home;
+mod icon;
 mod image;
 mod input;
 mod input_number;
@@ -37,6 +38,7 @@ pub use components::*;
 pub use divider::*;
 pub use grid::*;
 pub use home::*;
+pub use icon::*;
 pub use image::*;
 pub use input::*;
 pub use input_number::*;

src/icon/mod.rs

@@ -22,29 +22,32 @@ pub fn Icon(
     #[prop(into, optional)]
     style: Option<MaybeSignal<String>>,
 ) -> impl IntoView {
-    let icon: IconData = icon.get().into();
+    let icon = move || icondata_core::IconData::from(icon.get());
 
+    let svg = move || {
+        let icon = icon();
         let mut svg = svg::svg();
-    if let Some(classes) = class {
+        if let Some(classes) = class.clone() {
             svg = svg.classes(classes.get());
         }
-    // The style set by the user overrides the style set by the icon.
-    svg = match (style, icon.style) {
+        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",
-        Attribute::String(match (width, icon.width) {
+            Attribute::String(match (width.clone(), icon.width) {
                 (Some(a), Some(_b)) => Oco::from(a.get()),
                 (Some(a), None) => Oco::from(a.get()),
                 (None, Some(_b)) => Oco::from("1em"),
@@ -53,7 +56,7 @@ pub fn Icon(
         );
         svg = svg.attr(
             "height",
-        Attribute::String(match (height, icon.height) {
+            Attribute::String(match (height.clone(), icon.height) {
                 (Some(a), Some(_b)) => Oco::from(a.get()),
                 (Some(a), None) => Oco::from(a.get()),
                 (None, Some(_b)) => Oco::from("1em"),
@@ -78,5 +81,7 @@ pub fn Icon(
         svg = svg.attr("fill", icon.fill.unwrap_or("currentColor"));
         svg = svg.attr("role", "graphics-symbol");
         svg = svg.inner_html(icon.data);
-    IntoView::into_view(svg)
+        svg
+    };
+    svg.into_view()
 }