rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: stop importing phosphor icons with bare-name aliases

Browse Source 
Add a rule to contrib/claude/ui.md requiring the Icon-suffixed exports
(e.g. EyeIcon) instead of aliased bare names (Eye as IconEye), and fix
TrackerResourceRow to follow it.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-05-11 14:56:34 +04:00
parent b81795e62e
commit 4aebf65b89
2 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
contrib/claude/ui.md
View File

@@ -98,6 +98,18 @@ Icons come from two sources, in this order of preference:
**Never use emoji characters (🍪, ✅, ⚠️, …) as icons in UI.** Emojis render inconsistently across platforms, don't inherit `currentColor`, and can't be sized or styled like an SVG. If neither `@phosphor-icons/react` nor `@probo/ui` has what you need, add the missing icon to `@probo/ui` rather than falling back to emoji.
### Phosphor import style
Always import phosphor icons by their **`Icon`-suffixed name** (e.g. `EyeIcon`, `EyeSlashIcon`, `CookieIcon`). **Never** import the bare name and alias it with an `Icon` prefix — the library already exports the suffixed variant.
```tsx
// Bad — bare name aliased to add an Icon prefix
import { Eye as IconEye, EyeSlash as IconEyeSlash } from "@phosphor-icons/react";
// Good — use the Icon-suffixed export directly
import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
```
### Do / don't: icon source
```tsx