/
lib.rs
114 lines (112 loc) · 4.54 KB
/
lib.rs
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
//! [![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:
//! ```
//! # #[cfg(all(feature = "BsFolder", target_arch = "wasm32"))]
//! use leptos_icons::{*, BsIcon::*};
//! use leptos::*;
//! # #[cfg(all(feature = "BsFolder", target_arch = "wasm32"))]
//! let _ = view! {
//! <Icon icon=Icon::from(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)
}