leptos_remix_icon/
lib.rs

1use leptos::{component, view, IntoView};
2
3
4
5
6use serde::{Deserialize, Serialize};
7
8/// the icon size can be one of 10x, sm, lg ... etc
9/// this ported directly from remixicon.css
10/// .ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
11/// .ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
12/// .ri-xxs { font-size: .5em; }
13/// .ri-xs { font-size: .75em; }
14/// .ri-sm { font-size: .875em }
15/// .ri-sm { font-size: .875em }
16/// .ri-1x { font-size: 1em; }
17/// .ri-2x { font-size: 2em; }
18/// .ri-3x { font-size: 3em; }
19/// .ri-4x { font-size: 4em; }
20/// .ri-5x { font-size: 5em; }
21/// .ri-6x { font-size: 6em; }
22/// .ri-7x { font-size: 7em; }
23/// .ri-8x { font-size: 8em; }
24/// .ri-9x { font-size: 9em; }
25/// .ri-10x { font-size: 10em; }
26/// .ri-fw { text-align: center; width: 1.25em; }
27///
28///
29
30#[derive(Debug, Serialize, Deserialize, Default)]
31/// An enum to represent CSS class variants for font size and text alignment.
32pub enum IconSize {
33    /// .ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
34    RiXl,
35    /// .ri-xxs { font-size: .5em; }
36    RiXxs,
37    /// .ri-xs { font-size: .75em; }
38    RiXs,
39    /// .ri-sm { font-size: .875em; }
40    RiSm,
41    /// .ri-1x { font-size: 1em; }
42    Ri1x,
43    /// .ri-2x { font-size: 2em; }
44    Ri2x,
45    /// .ri-3x { font-size: 3em; }
46    Ri3x,
47    /// .ri-4x { font-size: 4em; }
48    Ri4x,
49    /// .ri-5x { font-size: 5em; }
50    Ri5x,
51    /// .ri-6x { font-size: 6em; }
52    Ri6x,
53    /// .ri-7x { font-size: 7em; }
54    Ri7x,
55    /// .ri-8x { font-size: 8em; }
56    Ri8x,
57    /// .ri-9x { font-size: 9em; }
58    Ri9x,
59    /// .ri-10x { font-size: 10em; }
60    Ri10x,
61    #[default]
62    /// .ri-fw { text-align: center; width: 1.25em; }
63    RiFw,
64}
65
66impl IconSize {
67  pub  fn from_str(size: &str) -> Option<Self> {
68        match size {
69            "xl" => Some(IconSize::RiXl),
70            "xxs" => Some(IconSize::RiXxs),
71            "xs" => Some(IconSize::RiXs),
72            "sm" => Some(IconSize::RiSm),
73            "1x" => Some(IconSize::Ri1x),
74            "2x" => Some(IconSize::Ri2x),
75            "3x" => Some(IconSize::Ri3x),
76            "4x" => Some(IconSize::Ri4x),
77            "5x" => Some(IconSize::Ri5x),
78            "6x" => Some(IconSize::Ri6x),
79            "7x" => Some(IconSize::Ri7x),
80            "8x" => Some(IconSize::Ri8x),
81            "9x" => Some(IconSize::Ri9x),
82            "10x" => Some(IconSize::Ri10x),
83            "fw" => Some(IconSize::RiFw),
84            _ => None,
85        }
86    }
87
88  pub  fn as_str(&self) -> &'static str {
89        match self {
90            IconSize::RiXl => "ri-xl",
91            IconSize::RiXxs => "ri-xxs",
92            IconSize::RiXs => "ri-xs",
93            IconSize::RiSm => "ri-sm",
94            IconSize::Ri1x => "ri-1x",
95            IconSize::Ri2x => "ri-2x",
96            IconSize::Ri3x => "ri-3x",
97            IconSize::Ri4x => "ri-4x",
98            IconSize::Ri5x => "ri-5x",
99            IconSize::Ri6x => "ri-6x",
100            IconSize::Ri7x => "ri-7x",
101            IconSize::Ri8x => "ri-8x",
102            IconSize::Ri9x => "ri-9x",
103            IconSize::Ri10x => "ri-10x",
104            IconSize::RiFw => "ri-fw",
105        }
106    }
107}
108
109
110
111/// The Icon takes three props
112/// icon - an equivalent of remix icon without the "ri-" prefix
113/// style - custom css rules
114/// class - tailwind or custom css classes
115///
116///
117/// ### Example (tailwind)
118/// ```rust
119/// <Icon class="text-2xl" icon="github-line"/>
120///  ```
121///
122/// ### Example (with style)
123///  <Icon class="text-2xl" icon="github-line" style="background-color-red; border:1px solid green;"/>
124///
125///
126#[component]
127pub fn Icon(
128    /// additional tailwind or custom css classes
129    #[prop(default = "")]
130    class: &'static str,
131    /// css style rules
132    #[prop(default = "")]
133    style: &'static str,
134    /// the remix icon class without the "ri-" prefix
135    #[prop(default = "")]
136    icon: &'static str,
137    /// remix icon class
138    #[prop(default = "")]
139    size: &'static str,
140) -> impl IntoView {
141    let icon_size = IconSize::from_str(&size.trim())
142        .unwrap_or_default()
143        .as_str();
144    view! { <i class=format!("ri-{icon} {class} {icon_size}") style=style></i> }
145}
leptos_remix_icon/lib.rs

leptos_remix_icon/
lib.rs
