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