zng/
icon.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
//! Icons service, icon font widget and other types.
//!
//! # Service
//!
//! The [`ICONS`] service bridges icon providers and icon users. Icon theme providers can register
//! handlers that provide a node that renders the icon identified by name. Widget styles or other UI
//! only need to request the icon, avoiding having to embed icon resources in lib crates and avoiding
//! icons having a fixed appearance.
//!
//! ```
//! use zng::{prelude::*, icon, widget::node::NilUiNode};
//! # let _scope = APP.defaults();
//!
//! icon::ICONS.register(wgt_fn!(|a: icon::IconRequestArgs| {
//!     match a.name() {
//!         "accessibility" => Text!("A").boxed(),
//!         "settings" => Text!("S").boxed(),
//!         _ => NilUiNode.boxed()
//!     }
//! }));
//! ```
//!
//! The example above registers a handler that provides two "icons" that are rendered by a `Text!` widgets.
//!
//! # Widget
//!
//! The [`Icon!`](struct@Icon) widget renders icons using an icon font, it allows setting the font and icon in a single value
//! and can auto size the font size, this makes it a better alternative to just using the `Text!` widget.
//!
//! ```
//! use zng::{prelude::*, icon};
//! # let _scope = APP.defaults();
//!
//! # let _ =
//! icon::Icon! {
//!     ico = icon::material::rounded::req("accessibility");
//!     ico_size = 80;
//! }
//! # ;
//! ```
//!
//! You can implement your own icon sets by providing [`GlyphIcon`] instances or a type that converts to `GlyphIcon`.
//! Glyph icons define a font name and a [`GlyphSource`] that can be a `char` or a ligature text.
//!
//! ```
//! # fn main() { }
//! use zng::{prelude::*, icon, font};
//! # async fn demo() {
//! # let _scope = APP.defaults();
//!
//! let font = font::CustomFont::from_file(
//!     "Font Awesome 6 Free-Regular",
//!     r#"Font Awesome 6 Free-Regular-400.otf"#,
//!     0,
//! );
//! font::FONTS.register(font).wait_into_rsp().await.unwrap();
//!
//! # let _ =
//! icon::Icon! {
//!     ico = icon::GlyphIcon::new("Font Awesome 6 Free-Regular", "address-book").with_ligatures();
//!     ico_size = 80;
//! }
//! # ;
//! # }
//! ```
//!
//! The example above loads an icon font and display one of the icons selected using a ligature that matches `"address-book"`.
//!
//! # Full API
//!
//! See [`zng_wgt_text::icon`] for the full widget API.

pub use zng_wgt::{CommandIconExt, IconRequestArgs, ICONS};
pub use zng_wgt_text::icon::{ico_color, ico_size, GlyphIcon, GlyphSource, Icon};

/// Material Icons
///
/// The [Material Design Icons] can be embedded using the `"material_icons*"` crate features.
///
/// [Material Design Icons]: https://github.com/google/material-design-icons
///
/// ```toml
/// zng = { version = "0.13.0", features = ["material_icons"] }
/// ```
///
/// Handlers are registered for [`ICONS`] that provides the icons, the raw codepoints and glyph icon metadata is available in each font module.
///
/// If multiple material icons are enabled they are resolved in this order:
///
/// * outlined
/// * filled
/// * rounded
/// * sharp
///
/// You can disambiguate icons by using a the `"material/{set}/{name}"` where `{set}` is one of the items from the list above,
/// and `{name}` is the icon name.
///
/// # Full API
///
/// See [`zng_wgt_material_icons`] for the full API.
pub mod material {
    #[cfg(feature = "material_icons_filled")]
    pub use zng_wgt_material_icons::filled;
    #[cfg(feature = "material_icons_outlined")]
    pub use zng_wgt_material_icons::outlined;
    #[cfg(feature = "material_icons_rounded")]
    pub use zng_wgt_material_icons::rounded;
    #[cfg(feature = "material_icons_sharp")]
    pub use zng_wgt_material_icons::sharp;
}