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

use crate::IconKind;
use dioxus::prelude::*;

/// Material Symbols icon font.
#[component]
pub fn IconFont(cx: Scope) -> Element {
    render!(
        link {
            href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200",
            rel: "stylesheet"
        }
    )
}

/// Material Symbols icon.
#[component]
pub fn Icon(
    cx: Scope,

    /// Kind of icon.
    kind: IconKind,

    /// Fill of the icon (optional).
    is_filled: Option<bool>,

    /// Weight of the icon (optional).
    weight: Option<u32>,

    /// Optical size of the icon (optional).
    size: Option<f32>,
) -> Element {
    let font_variation_settings = use_memo(cx, (is_filled, weight, size), move |_| {
        let mut s = String::new();
        let mut is_first = true;
        if *is_filled == Some(true) {
            if !is_first {
                s.push_str(", ");
            }
            s.push_str("'FILL' 1");
            is_first = false;
        }
        if let Some(weight) = weight {
            if !is_first {
                s.push_str(", ");
            }
            s.push_str(&format!("'wght' {}", weight));
            is_first = false;
        }
        if let Some(size) = size {
            if !is_first {
                s.push_str(", ");
            }
            s.push_str(&format!("'opsz' {}", size));
        }
        s
    });

    render!(
        span {
            class: "material-symbols-rounded",
            style: "font-variation-settings: {font_variation_settings};",
            kind.name()
        }
    )
}