feat(icons): add SunMoon icon and update related components

Author: Phosphorus-M

crates/leptos/src/button.rs

@@ -1,5 +1,5 @@
 use components_core::{BASE_CLASS, concat};
-use leptos::prelude::*;
+use leptos::{ev::MouseEvent, prelude::*};
 
 #[derive(Default, Debug, PartialEq)]
 pub enum Variant {
@@ -10,20 +10,25 @@ pub enum Variant {
     Icon,
 }
 
-#[component(transparent)]
+#[component]
 pub fn Button(
     #[prop(into, optional)] variant: Variant,
-    #[prop(into, optional)] label: String,
     #[prop(into, optional)] class: String,
-    icon: View<impl IntoView + Send + Sync>,
+    on_click: impl FnMut(MouseEvent) + 'static,
+    #[prop(into, optional)] icon: Option<AnyView>,
+    #[prop(into, optional)] label: Option<String>
 ) -> impl IntoView {
-    let var = format!("{}{variant:?}", concat!(BASE_CLASS, "-button", "--"));
+    let var = format!(
+        "{}{}",
+        concat!(BASE_CLASS, "-button", "--"),
+        format!("{variant:?}").to_lowercase()
+    );
     let class = crate::tw!("text-button", var, concat!(BASE_CLASS, "-button"), class);
 
     view! {
-        <button class={class}>
+        <button class={class} on:click=on_click>
             {(variant != Variant::Icon).then_some(label)}
-            {(variant == Variant::Icon).then(|| icon.into_view())}
+            {icon.into_view()}
         </button>
     }
 }

crates/leptos/src/icons/project.rs

@@ -1,19 +1,14 @@
 use leptos::prelude::*;
 
 #[component]
-pub fn Project(#[prop(into, optional, default = 24)] size: u32) -> impl IntoView {
+pub fn Project(
+    #[prop(into, optional, default = 24)] size: i32,
+    #[prop(into, default = "".to_string())] class: String,
+) -> impl IntoView {
     view! {
-        <svg
-            width={size}
-            height={size}
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M4.75 7C4.55109 7 4.36032 7.07902 4.21967 7.21967C4.07902 7.36032 4 7.55109 4 7.75C4 7.94891 4.07902 8.13968 4.21967 8.28033C4.36032 8.42098 4.55109 8.5 4.75 8.5H9.25C9.44891 8.5 9.63968 8.42098 9.78033 8.28033C9.92098 8.13968 10 7.94891 10 7.75C10 7.55109 9.92098 7.36032 9.78033 7.21967C9.63968 7.07902 9.44891 7 9.25 7H4.75ZM5 4.75C5 4.55109 5.07902 4.36032 5.21967 4.21967C5.36032 4.07902 5.55109 4 5.75 4H11.25C11.4489 4 11.6397 4.07902 11.7803 4.21967C11.921 4.36032 12 4.55109 12 4.75C12 4.94891 11.921 5.13968 11.7803 5.28033C11.6397 5.42098 11.4489 5.5 11.25 5.5H5.75C5.55109 5.5 5.36032 5.42098 5.21967 5.28033C5.07902 5.13968 5 4.94891 5 4.75ZM6.75 10C6.55109 10 6.36032 10.079 6.21967 10.2197C6.07902 10.3603 6 10.5511 6 10.75C6 10.9489 6.07902 11.1397 6.21967 11.2803C6.36032 11.421 6.55109 11.5 6.75 11.5H11.25C11.4489 11.5 11.6397 11.421 11.7803 11.2803C11.921 11.1397 12 10.9489 12 10.75C12 10.5511 11.921 10.3603 11.7803 10.2197C11.6397 10.079 11.4489 10 11.25 10H6.75Z"
-                fill="currentColor"
-            />
+        <svg xmlns="http://www.w3.org/2000/svg" width=size height=size viewBox="0 0 16 16" class=class>
+            <path d="M4.75 7C4.55109 7 4.36032 7.07902 4.21967 7.21967C4.07902 7.36032 4 7.55109 4 7.75C4 7.94891 4.07902 8.13968 4.21967 8.28033C4.36032 8.42098 4.55109 8.5 4.75 8.5H9.25C9.44891 8.5 9.63968 8.42098 9.78033 8.28033C9.92098 8.13968 10 7.94891 10 7.75C10 7.55109 9.92098 7.36032 9.78033 7.21967C9.63968 7.07902 9.44891 7 9.25 7H4.75ZM5 4.75C5 4.55109 5.07902 4.36032 5.21967 4.21967C5.36032 4.07902 5.55109 4 5.75 4H11.25C11.4489 4 11.6397 4.07902 11.7803 4.21967C11.921 4.36032 12 4.55109 12 4.75C12 4.94891 11.921 5.13968 11.7803 5.28033C11.6397 5.42098 11.4489 5.5 11.25 5.5H5.75C5.55109 5.5 5.36032 5.42098 5.21967 5.28033C5.07902 5.13968 5 4.94891 5 4.75ZM6.75 10C6.55109 10 6.36032 10.079 6.21967 10.2197C6.07902 10.3603 6 10.5511 6 10.75C6 10.9489 6.07902 11.1397 6.21967 11.2803C6.36032 11.421 6.55109 11.5 6.75 11.5H11.25C11.4489 11.5 11.6397 11.421 11.7803 11.2803C11.921 11.1397 12 10.9489 12 10.75C12 10.5511 11.921 10.3603 11.7803 10.2197C11.6397 10.079 11.4489 10 11.25 10H6.75Z" fill="currentColor"/>
+            <path d="M0 1.75C0 0.784 0.784 0 1.75 0H14.25C15.216 0 16 0.784 16 1.75V14.25C16 14.7141 15.8156 15.1592 15.4874 15.4874C15.1592 15.8156 14.7141 16 14.25 16H1.75C1.28587 16 0.840752 15.8156 0.512563 15.4874C0.184374 15.1592 0 14.7141 0 14.25L0 1.75ZM1.75 1.5C1.6837 1.5 1.62011 1.52634 1.57322 1.57322C1.52634 1.62011 1.5 1.6837 1.5 1.75V14.25C1.5 14.388 1.612 14.5 1.75 14.5H14.25C14.3163 14.5 14.3799 14.4737 14.4268 14.4268C14.4737 14.3799 14.5 14.3163 14.5 14.25V1.75C14.5 1.6837 14.4737 1.62011 14.4268 1.57322C14.3799 1.52634 14.3163 1.5 14.25 1.5H1.75Z" fill="currentColor"/>
         </svg>
     }
 }

crates/leptos/src/icons/roadmap.rs

@@ -1,19 +1,14 @@
 use leptos::prelude::*;
 
 #[component]
-pub fn Roadmap(#[prop(into, optional, default = 24)] size: u32) -> impl IntoView {
+pub fn Roadmap(
+    #[prop(into, optional, default = 24)] size: i32,
+    #[prop(into, default = "".to_string())] class: String,
+) -> impl IntoView {
     view! {
-        <svg
-            width={size}
-            height={size}
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M6.99989 11.643H13.4999M6.99989 11.643C6.99989 11.8259 6.96386 12.0071 6.89385 12.1761C6.82385 12.3451 6.72124 12.4986 6.59189 12.628C6.46254 12.7574 6.30897 12.86 6.13997 12.93C5.97096 13 5.78982 13.036 5.60689 13.036C5.42396 13.036 5.24282 13 5.07381 12.93C4.9048 12.86 4.75124 12.7574 4.62189 12.628C4.49254 12.4986 4.38993 12.3451 4.31992 12.1761C4.24992 12.0071 4.21389 11.8259 4.21389 11.643C4.21389 11.4601 4.24992 11.2789 4.31992 11.1099C4.38993 10.9409 4.49254 10.7874 4.62189 10.658C4.75124 10.5286 4.9048 10.426 5.07381 10.356C5.24282 10.286 5.42396 10.25 5.60689 10.25C5.78982 10.25 5.97096 10.286 6.13997 10.356C6.30897 10.426 6.46254 10.5286 6.59189 10.658C6.72124 10.7874 6.82385 10.9409 6.89385 11.1099C6.96386 11.2789 6.99989 11.4601 6.99989 11.643ZM13.4999 11.643L11.6429 9.786M13.4999 11.643L11.6429 13.5M3.28589 1.893C3.28589 2.26245 3.43265 2.61676 3.69389 2.878C3.95513 3.13924 4.30944 3.286 4.67889 3.286C5.04834 3.286 5.40265 3.13924 5.66389 2.878C5.92513 2.61676 6.07189 2.26245 6.07189 1.893C6.07189 1.52355 5.92513 1.16924 5.66389 0.908C5.40265 0.646762 5.04834 0.5 4.67889 0.5C4.30944 0.5 3.95513 0.646762 3.69389 0.908C3.43265 1.16924 3.28589 1.52355 3.28589 1.893ZM6.99989 6.536C6.99989 6.90545 7.14665 7.25976 7.40789 7.521C7.66913 7.78224 8.02344 7.929 8.39289 7.929C8.76233 7.929 9.11665 7.78224 9.37789 7.521C9.63913 7.25976 9.78589 6.90545 9.78589 6.536C9.78589 6.16655 9.63913 5.81224 9.37789 5.551C9.11665 5.28976 8.76233 5.143 8.39289 5.143C8.02344 5.143 7.66913 5.28976 7.40789 5.551C7.14665 5.81224 6.99989 6.16655 6.99989 6.536Z"
-                fill="currentColor"
-            />
+        <svg width={size} height={size} viewBox="0 0 14 14" class=class xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.99989 11.643H13.4999M6.99989 11.643C6.99989 11.8259 6.96386 12.0071 6.89385 12.1761C6.82385 12.3451 6.72124 12.4986 6.59189 12.628C6.46254 12.7574 6.30897 12.86 6.13997 12.93C5.97096 13 5.78982 13.036 5.60689 13.036C5.42396 13.036 5.24282 13 5.07381 12.93C4.9048 12.86 4.75124 12.7574 4.62189 12.628C4.49254 12.4986 4.38993 12.3451 4.31992 12.1761C4.24992 12.0071 4.21389 11.8259 4.21389 11.643C4.21389 11.4601 4.24992 11.2789 4.31992 11.1099C4.38993 10.9409 4.49254 10.7874 4.62189 10.658C4.75124 10.5286 4.9048 10.426 5.07381 10.356C5.24282 10.286 5.42396 10.25 5.60689 10.25C5.78982 10.25 5.97096 10.286 6.13997 10.356C6.30897 10.426 6.46254 10.5286 6.59189 10.658C6.72124 10.7874 6.82385 10.9409 6.89385 11.1099C6.96386 11.2789 6.99989 11.4601 6.99989 11.643ZM13.4999 11.643L11.6429 9.786M13.4999 11.643L11.6429 13.5M3.28589 1.893C3.28589 2.26245 3.43265 2.61676 3.69389 2.878C3.95513 3.13924 4.30944 3.286 4.67889 3.286C5.04834 3.286 5.40265 3.13924 5.66389 2.878C5.92513 2.61676 6.07189 2.26245 6.07189 1.893C6.07189 1.52355 5.92513 1.16924 5.66389 0.908C5.40265 0.646762 5.04834 0.5 4.67889 0.5C4.30944 0.5 3.95513 0.646762 3.69389 0.908C3.43265 1.16924 3.28589 1.52355 3.28589 1.893ZM6.99989 6.536C6.99989 6.90545 7.14665 7.25976 7.40789 7.521C7.66913 7.78224 8.02344 7.929 8.39289 7.929C8.76233 7.929 9.11665 7.78224 9.37789 7.521C9.63913 7.25976 9.78589 6.90545 9.78589 6.536C9.78589 6.16655 9.63913 5.81224 9.37789 5.551C9.11665 5.28976 8.76233 5.143 8.39289 5.143C8.02344 5.143 7.66913 5.28976 7.40789 5.551C7.14665 5.81224 6.99989 6.16655 6.99989 6.536Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M7 6.53607H3.054C2.38552 6.5493 1.74888 6.82414 1.2808 7.30157C0.812726 7.77901 0.550535 8.42096 0.550535 9.08957C0.550535 9.75818 0.812726 10.4001 1.2808 10.8776C1.74888 11.355 2.38552 11.6298 3.054 11.6431H4.214M9.786 6.53607H11.179C11.7947 6.53607 12.3852 6.29148 12.8205 5.85611C13.2559 5.42075 13.5005 4.83027 13.5005 4.21457C13.5005 3.59887 13.2559 3.00838 12.8205 2.57302C12.3852 2.13765 11.7947 1.89307 11.179 1.89307H6.07M3.286 1.89307H0.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path>
         </svg>
     }
 }

js/react/lib/icons/index.ts

@@ -18,6 +18,7 @@ export { Roadmap } from "./roadmap";
 export { Share } from "./share";
 export { StarBold } from "./star-bold";
 export { SunLine } from "./sun-line";
+export { SunMoon } from "./sun-moon";
 export { Telegram } from "./telegram";
 export { Twitter } from "./twitter";
-export { Youtube } from "./youtube";
+export { Youtube } from "./youtube";

js/react/lib/icons/sun-moon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from "react";
+export const SunMoon = (props: SVGProps<SVGSVGElement>) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg"  
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"  
+    fill="none"  
+    stroke="currentColor"  
+    stroke-width="2"  
+    stroke-linecap="round"  
+    stroke-linejoin="round"  
+    {...props}>
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+        <path d="M9.173 14.83a4 4 0 1 1 5.657 -5.657" />
+        <path d="M11.294 12.707l.174 .247a7.5 7.5 0 0 0 8.845 2.492a9 9 0 0 1 -14.671 2.914" />
+        <path d="M3 12h1" /><path d="M12 3v1" /><path d="M5.6 5.6l.7 .7" />
+        <path d="M3 21l18 -18" />
+  </svg>
+);