phosphor_leptos/
lib.rs

1#![doc = r" Phosphor is a flexible icon family for interfaces, diagrams,"]
2#![doc = r" presentations — whatever, really."]
3#![doc = r" You can explore the available icons at [phosphoricons.com](https://phosphoricons.com)."]
4#![doc = r""]
5#![doc = r" ```"]
6#![doc = r" use leptos::prelude::*;"]
7#![doc = r" use phosphor_leptos::{Icon, IconWeight, HORSE, HEART, CUBE};"]
8#![doc = r""]
9#![doc = r" #[component]"]
10#![doc = r" fn MyComponent() -> impl IntoView {"]
11#![doc = r"     view! {"]
12#![doc = r"         <Icon icon=HORSE />"]
13#![doc = r##"         <Icon icon=HEART color="#AE2983" weight=IconWeight::Fill size="32px" />"##]
14#![doc = r#"         <Icon icon=CUBE color="teal" weight=IconWeight::Duotone />"#]
15#![doc = r"     }"]
16#![doc = r" }"]
17#![doc = r" ```"]
18use leptos::{prelude::*, text_prop::TextProp};
19mod icons;
20pub use icons::*;
21#[doc = r" An icon's weight or style."]
22#[derive(Debug, Clone, Copy, PartialEq, Eq)]
23pub enum IconWeight {
24    Bold,
25    Duotone,
26    Fill,
27    Light,
28    Regular,
29    Thin,
30}
31#[doc = r" The SVG path data for all weights of a particular icon."]
32#[derive(Debug, Clone, Copy, PartialEq, Eq)]
33pub struct IconWeightData([&'static str; 6usize]);
34impl IconWeightData {
35    #[doc = r" Retrieve the SVG paths for the given weight."]
36    #[doc = r""]
37    #[doc = r" The returned string slice contains raw path elements."]
38    #[doc = r" To render them manually, you'll need to provide them to"]
39    #[doc = r" an SVG component's `inner_html` property."]
40    #[doc = r""]
41    #[doc = r" ```"]
42    #[doc = r" # use leptos::prelude::*;"]
43    #[doc = r" # #[component]"]
44    #[doc = r" # fn MyComponent() -> impl IntoView {"]
45    #[doc = r" use phosphor_leptos::{ACORN, IconWeight};"]
46    #[doc = r""]
47    #[doc = r" let raw_html = ACORN.get(IconWeight::Regular);"]
48    #[doc = r" view! {"]
49    #[doc = r"     <svg inner_html=raw_html />"]
50    #[doc = r" }"]
51    #[doc = r" # }"]
52    #[doc = r" ```"]
53    pub fn get(&self, weight: IconWeight) -> &'static str {
54        match weight {
55            IconWeight::Bold => self.0[0usize],
56            IconWeight::Duotone => self.0[1usize],
57            IconWeight::Fill => self.0[2usize],
58            IconWeight::Light => self.0[3usize],
59            IconWeight::Regular => self.0[4usize],
60            IconWeight::Thin => self.0[5usize],
61        }
62    }
63}
64#[doc = r" A convenient alias for passing around references to [IconWeightData]."]
65#[doc = r""]
66#[doc = r" While [IconWeightData] is `Copy`, it's not particularly beneficial to pass"]
67#[doc = r" all those bytes around (48 bytes on WASM, 96 bytes on 64 bit systems)."]
68pub type IconData = &'static IconWeightData;
69#[doc = r" A thin wrapper around `<svg />` for displaying Phosphor icons."]
70#[doc = r""]
71#[doc = r" ```"]
72#[doc = r" use leptos::prelude::*;"]
73#[doc = r" use phosphor_leptos::{Icon, IconWeight, HORSE, HEART, CUBE};"]
74#[doc = r""]
75#[doc = r" #[component]"]
76#[doc = r" fn MyComponent() -> impl IntoView {"]
77#[doc = r"     view! {"]
78#[doc = r"         <Icon icon=HORSE />"]
79#[doc = r##"         <Icon icon=HEART color="#AE2983" weight=IconWeight::Fill size="32px" />"##]
80#[doc = r#"         <Icon icon=CUBE color="teal" weight=IconWeight::Duotone />"#]
81#[doc = r"     }"]
82#[doc = r" }"]
83#[doc = r" ```"]
84#[component]
85pub fn Icon(
86    #[doc = r" The icon data to display."] icon: IconData,
87    #[doc = r#" Icon weight/style. This can also be used, for example, to "toggle" an icon's state:"#]
88    #[doc = r" a rating component could use Stars with [IconWeight::Regular] to denote an empty star,"]
89    #[doc = r" and [IconWeight::Fill] to denote a filled star."]
90    # [prop (into , default = Signal :: stored (IconWeight :: Regular))]
91    weight: Signal<IconWeight>,
92    #[doc = r" Icon height & width. As with standard React elements,"]
93    #[doc = r" this can be a number, or a string with units in"]
94    #[doc = r" `px`, `%`, `em`, `rem`, `pt`, `cm`, `mm`, `in`."]
95    # [prop (into , default = TextProp :: from ("1em"))]
96    size: TextProp,
97    #[doc = r" Icon stroke/fill color."]
98    #[doc = r""]
99    #[doc = r" This can be any CSS color string, including"]
100    #[doc = r" `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors,"]
101    #[doc = r" or the special `currentColor` variable."]
102    #[doc = r""]
103    # [prop (into , default = TextProp :: from ("currentColor"))]
104    color: TextProp,
105    #[doc = r" Flip the icon horizontally."]
106    #[doc = r""]
107    #[doc = r" This can be useful in RTL languages where normal"]
108    #[doc = r" icon orientation is not appropriate."]
109    # [prop (into , default = Signal :: stored (false))]
110    mirrored: Signal<bool>,
111) -> impl IntoView {
112    let html = move || icon.get(weight.get());
113    let transform = move || mirrored.get().then_some("scale(-1, 1)");
114    let height = size.clone();
115    view! {
116        <svg
117            xmlns="http://www.w3.org/2000/svg"
118            width=move || size.get()
119            height=move || height.get()
120            fill=move || color.get()
121            transform=transform
122            viewBox="0 0 256 256"
123            inner_html=html
124        />
125    }
126}
phosphor_leptos/lib.rs

phosphor_leptos/
lib.rs
