ph-leptos 0.7.2

phosphor icons for leptos
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

#![doc = r" Phosphor is a flexible icon family for interfaces, diagrams,"]
#![doc = r" presentations — whatever, really."]
#![doc = r" You can explore the available icons at [phosphoricons.com](https://phosphoricons.com)."]
#![doc = r""]
#![doc = r" ```"]
#![doc = r" use leptos::prelude::*;"]
#![doc = r" use phosphor_leptos::{Icon, IconWeight, HORSE, HEART, CUBE};"]
#![doc = r""]
#![doc = r" #[component]"]
#![doc = r" fn MyComponent() -> impl IntoView {"]
#![doc = r"     view! {"]
#![doc = r"         <Icon icon=HORSE />"]
#![doc = r##"         <Icon icon=HEART color="#AE2983" weight=IconWeight::Fill size="32px" />"##]
#![doc = r#"         <Icon icon=CUBE color="teal" weight=IconWeight::Duotone />"#]
#![doc = r"     }"]
#![doc = r" }"]
#![doc = r" ```"]
use leptos::{prelude::*, text_prop::TextProp};
mod icons;
pub use icons::*;
#[doc = r" An icon's weight or style."]
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum IconWeight {
    Bold,
    Duotone,
    Fill,
    Light,
    Regular,
    Thin,
}
#[doc = r" The SVG path data for all weights of a particular icon."]
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub struct IconWeightData([&'static str; 6usize]);
impl IconWeightData {
    #[doc = r" Retrieve the SVG paths for the given weight."]
    #[doc = r""]
    #[doc = r" The returned string slice contains raw path elements."]
    #[doc = r" To render them manually, you'll need to provide them to"]
    #[doc = r" an SVG component's `inner_html` property."]
    #[doc = r""]
    #[doc = r" ```"]
    #[doc = r" # use leptos::prelude::*;"]
    #[doc = r" # #[component]"]
    #[doc = r" # fn MyComponent() -> impl IntoView {"]
    #[doc = r" use phosphor_leptos::{ACORN, IconWeight};"]
    #[doc = r""]
    #[doc = r" let raw_html = ACORN.get(IconWeight::Regular);"]
    #[doc = r" view! {"]
    #[doc = r"     <svg inner_html=raw_html />"]
    #[doc = r" }"]
    #[doc = r" # }"]
    #[doc = r" ```"]
    pub fn get(&self, weight: IconWeight) -> &'static str {
        match weight {
            IconWeight::Bold => self.0[0usize],
            IconWeight::Duotone => self.0[1usize],
            IconWeight::Fill => self.0[2usize],
            IconWeight::Light => self.0[3usize],
            IconWeight::Regular => self.0[4usize],
            IconWeight::Thin => self.0[5usize],
        }
    }
}
#[doc = r" A convenient alias for passing around references to [IconWeightData]."]
#[doc = r""]
#[doc = r" While [IconWeightData] is `Copy`, it's not particularly beneficial to pass"]
#[doc = r" all those bytes around (48 bytes on WASM, 96 bytes on 64 bit systems)."]
pub type IconData = &'static IconWeightData;
#[doc = r" A thin wrapper around `<svg />` for displaying Phosphor icons."]
#[doc = r""]
#[doc = r" ```"]
#[doc = r" use leptos::prelude::*;"]
#[doc = r" use phosphor_leptos::{Icon, IconWeight, HORSE, HEART, CUBE};"]
#[doc = r""]
#[doc = r" #[component]"]
#[doc = r" fn MyComponent() -> impl IntoView {"]
#[doc = r"     view! {"]
#[doc = r"         <Icon icon=HORSE />"]
#[doc = r##"         <Icon icon=HEART color="#AE2983" weight=IconWeight::Fill size="32px" />"##]
#[doc = r#"         <Icon icon=CUBE color="teal" weight=IconWeight::Duotone />"#]
#[doc = r"     }"]
#[doc = r" }"]
#[doc = r" ```"]
#[component]
pub fn Icon(
    #[doc = r" The icon data to display."] icon: IconData,
    #[doc = r#" Icon weight/style. This can also be used, for example, to "toggle" an icon's state:"#]
    #[doc = r" a rating component could use Stars with [IconWeight::Regular] to denote an empty star,"]
    #[doc = r" and [IconWeight::Fill] to denote a filled star."]
    # [prop (into , default = Signal :: stored (IconWeight :: Regular))]
    weight: Signal<IconWeight>,
    #[doc = r" Icon height & width. As with standard React elements,"]
    #[doc = r" this can be a number, or a string with units in"]
    #[doc = r" `px`, `%`, `em`, `rem`, `pt`, `cm`, `mm`, `in`."]
    # [prop (into , default = TextProp :: from ("1em"))]
    size: TextProp,
    #[doc = r" Icon stroke/fill color."]
    #[doc = r""]
    #[doc = r" This can be any CSS color string, including"]
    #[doc = r" `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors,"]
    #[doc = r" or the special `currentColor` variable."]
    #[doc = r""]
    # [prop (into , default = TextProp :: from ("currentColor"))]
    color: TextProp,
    #[doc = r" Flip the icon horizontally."]
    #[doc = r""]
    #[doc = r" This can be useful in RTL languages where normal"]
    #[doc = r" icon orientation is not appropriate."]
    # [prop (into , default = Signal :: stored (false))]
    mirrored: Signal<bool>,
) -> impl IntoView {
    let html = move || icon.get(weight.get());
    let transform = move || mirrored.get().then_some("scale(-1, 1)");
    let height = size.clone();
    view! {
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width=move || size.get()
            height=move || height.get()
            fill=move || color.get()
            transform=transform
            viewBox="0 0 256 256"
            inner_html=html
        />
    }
}