Claude-skill-registry add-icon

Add a new Tabler icon to the project. Use when adding icons to the UI.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/add-icon" ~/.claude/skills/majiayu000-claude-skill-registry-add-icon && rm -rf "$T"

manifest: skills/data/add-icon/SKILL.md

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

Choose Icon
- Browse available icons: https://tabler.io/icons
- Note the icon name (e.g.,
```
folder-open
```
  ,
```
info-circle
```
  )
Add to icons.json
- Edit
```
renderer/icons.json
```
- Add the icon name to the JSON array (in alphabetical order)
Build Icon Sprite (Automatic)
- Icon sprite is automatically generated when Vite builds
- Just run
```
just dev
```
  or
```
cargo build
```
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

File	Purpose	Git Tracked
`renderer/icons.json`	Icon list configuration	✅ Yes
`renderer/vite.config.ts`	Icon sprite plugin	✅ Yes
`renderer/public/icons/tabler-sprite.svg`	Generated sprite (Vite source)	❌ No
`assets/dist/icons/tabler-sprite.svg`	Build output (Dioxus asset)	❌ No

Important

NEVER edit generated SVG files directly
The
```
assets/dist/
```
directory is
```
.gitignore
```
d 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