Add Icon

Add Icon Skill

This skill guides you through adding a new icon from Tabler Icons to the project.

Process

Icons are managed via icons.json and automatically built by Vite plugin.

Steps

1. Choose Icon

   • Browse available icons: https://tabler.io/icons
   • Note the icon name (e.g., folder-open, info-circle)

2. Add to icons.json

   • Edit renderer/icons.json
   • Add the icon name to the JSON array (in alphabetical order)

3. Build Icon Sprite (Automatic)

   • Icon sprite is automatically generated when Vite builds
   • Just run just dev or cargo build

4. Add Rust Enum Variant

   • Edit desktop/src/components/icon.rs
   • Add variant to IconName enum (use PascalCase)
   • Add case to Display implementation

Example

renderer/icons.json:

[
  "folder",
  "folder-open",
  "file"
]

desktop/src/components/icon.rs:

pub enum IconName {
    Folder,
    FolderOpen,
    File,
}

impl std::fmt::Display for IconName {
    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
        match self {
            IconName::Folder => write!(f, "folder"),
            IconName::FolderOpen => write!(f, "folder-open"),
            IconName::File => write!(f, "file"),
        }
    }
}

File Locations

Important

• NEVER edit generated SVG files directly
• The assets/dist/ directory is .gitignored as build output
• Icon sprite generation is automatic via Vite plugin (buildStart hook)
• Rust code references icons via asset!("/assets/dist/icons/tabler-sprite.svg")
• Icons come from @tabler/icons npm package (outline style only)

Build Process

icons.json
    ↓
Vite plugin (buildStart hook)
    ↓
renderer/public/icons/tabler-sprite.svg
    ↓
Vite build
    ↓
assets/dist/icons/tabler-sprite.svg
    ↓
Rust asset!() macro