leptos_icons 0.1.0

Component library providing a variety of icons for the leptos web framework.
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

//! [![github]](https://github.com/Carlosted/leptos-icons) [![crates-io]](https://crates.io/crates/leptos_icons) [![docs-rs]](crate)
//!
//! [github]: https://img.shields.io/badge/github-8da0cb?style=for-the-badge&labelColor=555555&logo=github
//! [crates-io]: https://img.shields.io/badge/crates.io-fc8d62?style=for-the-badge&labelColor=555555&logo=rust
//! [docs-rs]: https://img.shields.io/badge/docs.rs-66c2a5?style=for-the-badge&labelColor=555555&logo=docs.rs
//!
//! <br>
//!
//! Add icons from popular icon libraries into your leptos projects. Every icon is packaged as its own cargo feature to reduce build times.
//!
//! Every enum variant has a corresponding feature name, that enables it.
//!
//! ### Example
//! In Cargo.toml, include:
//! ```toml
//! [dependencies]
//! # ...
//! leptos_icons = { version = "{crate_version}", features = ["BsFolder"] }
//! ```
//! In your leptos project, use:
//! ```
//! view! {
//!     <LeptosIcon icon=icon!(BsFolder) />
//! }
//! ```
//! To see a complete and working example, take a look at the [examples directory](https://github.com/Carlosted/leptos-icons/tree/main/examples) on github.
pub use icondata::*;
use leptos::SignalGet;

/// The Icon component.
#[leptos::component]
pub fn Icon(
    /// 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 = move || icondata::IconData::from(icon.get());

    let svg = move || {
        let icon = icon();
        let mut svg = leptos::svg::svg();
        if let Some(classes) = class.clone() {
            svg = svg.classes(classes.get());
        }
        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",
            leptos::Attribute::String(match (width.clone(), icon.width) {
                (Some(a), Some(_b)) => leptos::Oco::from(a.get()),
                (Some(a), None) => leptos::Oco::from(a.get()),
                (None, Some(_b)) => leptos::Oco::from("1em"),
                (None, None) => leptos::Oco::from("1em"),
            }),
        );
        svg = svg.attr(
            "height",
            leptos::Attribute::String(match (height.clone(), icon.height) {
                (Some(a), Some(_b)) => leptos::Oco::from(a.get()),
                (Some(a), None) => leptos::Oco::from(a.get()),
                (None, Some(_b)) => leptos::Oco::from("1em"),
                (None, None) => leptos::Oco::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);
        svg
    };
    leptos::IntoView::into_view(svg)
}