Icons System

Icon management and rendering system, integrated with Material Design Icons (MDI).

Overview

hikari-icons provides:

Icon Component

Basic Usage

rust
1
2
3
4
5
6
7
8
9
use hikari_icons::{Icon, MdiIcon};

rsx! {
    Icon {
        icon: MdiIcon::Magnify,
        size: 24,
        color: "var(--hi-color-primary)"
    }
}

Available Icons

rust
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
pub enum MdiIcon {
    // Navigation
    Home,
    Menu,
    Magnify,
    Cog,
    ChevronDown,
    ChevronLeft,
    ChevronRight,

    // Actions
    Pencil,
    Delete,
    Check,
    Close,
    Plus,
    Minus,

    // Status
    AlertCircleOutline,
    CheckCircleOutline,
    InformationOutline,
    AlertOutline,

    // ... 1000+ icons
}

Props

PropertyTypeDefaultDescription
iconMdiIcon-Icon type
sizeu3224Icon size
color&str-Color

Runtime Loading

Client-side Rendering

rust
1
2
3
4
5
6
use hikari_icons::runtime;

// Asynchronously load icon SVG
async fn load_icon(name: &str) -> Result<String, Error> {
    runtime::load_icon(name).await
}

Server-side Rendering

rust
1
2
3
4
5
6
use hikari_icons::server;

// Server-side render icon
fn render_icon(name: &str) -> String {
    server::render_icon(name)
}

API Reference

Icon

rust
1
2
3
4
5
6
7
8
#[component]
pub fn Icon(
    icon: MdiIcon,
    size: Option<u32>,
    color: Option<&str>,
    class: Option<String>,
    style: Option<String>
) -> Element

MdiIcon

rust
1
2
3
pub enum MdiIcon {
    // 1000+ icon variants
}

runtime

rust
1
2
3
pub mod runtime {
    pub async fn load_icon(name: &str) -> Result<String, Error>;
}

server

rust
1
2
3
pub mod server {
    pub fn render_icon(name: &str) -> String;
}

Integration with Other Systems

Related Systems