Fusion
6f41fa7cbe
- Install @phosphor-icons/react package - Create centralized Icon component with size/weight/color variants - Create icon registry with 34 icons across 5 categories - Replace all raw Unicode symbols with proper icon components - Add icons to navigation, buttons, status indicators, git operations - Add icon CSS with consistent sizing and spacing - Fix type definitions for Phosphor icon compatibility Quality gates: typecheck ✓, lint ✓, build ✓ (375KB bundle)
112 lines
2.9 KiB
Markdown
112 lines
2.9 KiB
Markdown
# Universal Icon System Specification
|
|
|
|
## Requirements
|
|
|
|
### Functional Requirements
|
|
|
|
1. **Icon Component**: Centralized `Icon` component that wraps Phosphor icons
|
|
2. **Icon Registry**: Mapping of logical names to Phosphor icon components
|
|
3. **Size Variants**: Support for sm (16px), md (20px), lg (24px), xl (32px)
|
|
4. **Color Inheritance**: Default to `currentColor`, support explicit colors
|
|
5. **Accessibility**: Proper ARIA labels and roles
|
|
6. **Tree Shaking**: Only include icons that are actually used
|
|
|
|
### Non-Functional Requirements
|
|
|
|
1. **Bundle Size**: Minimal impact (~2KB per icon weight variant)
|
|
2. **Performance**: No layout shift, instant rendering
|
|
3. **Browser Support**: All modern browsers (Chrome, Firefox, Safari, Edge)
|
|
4. **Consistency**: Identical rendering across all platforms
|
|
|
|
## Icon Registry
|
|
|
|
### Navigation Icons
|
|
- `dashboard` → `House`
|
|
- `projects` → `Folder`
|
|
- `repositories` → `GitBranch`
|
|
- `settings` → `Gear`
|
|
- `profile` → `User`
|
|
- `logout` → `SignOut`
|
|
|
|
### Action Icons
|
|
- `add` → `Plus`
|
|
- `edit` → `PencilSimple`
|
|
- `delete` → `Trash`
|
|
- `save` → `FloppyDisk`
|
|
- `cancel` → `X`
|
|
- `refresh` → `ArrowsClockwise`
|
|
- `copy` → `Copy`
|
|
- `search` → `MagnifyingGlass`
|
|
- `menu` → `List`
|
|
- `close` → `X`
|
|
|
|
### Status Icons
|
|
- `success` → `Check`
|
|
- `error` → `X`
|
|
- `warning` → `Warning`
|
|
- `info` → `Info`
|
|
- `loading` → `Spinner`
|
|
|
|
### Git Icons
|
|
- `branch` → `GitBranch`
|
|
- `commit` → `GitCommit`
|
|
- `merge` → `GitMerge`
|
|
- `history` → `ClockCounterClockwise`
|
|
- `pull` → `ArrowDown`
|
|
- `push` → `ArrowUp`
|
|
- `fetch` → `ArrowsClockwise`
|
|
|
|
### File Icons
|
|
- `file` → `File`
|
|
- `folder` → `Folder`
|
|
- `code` → `Code`
|
|
- `document` → `FileText`
|
|
- `image` → `Image`
|
|
- `binary` → `FileBinary`
|
|
|
|
## Migration Checklist
|
|
|
|
### Components to Update
|
|
- [ ] `app-shell.tsx` - Navigation icons
|
|
- [ ] `git-toolbar.tsx` - Git operation icons
|
|
- [ ] `git-repositories.tsx` - Status/validation icons
|
|
- [ ] `repo-workspace.tsx` - File tree icons
|
|
- [ ] `file-editor.tsx` - File type icons
|
|
- [ ] `dashboard.tsx` - Dashboard icons
|
|
- [ ] `projects.tsx` - Project action icons
|
|
- [ ] `settings.tsx` - Settings icons
|
|
- [ ] `tool-types.tsx` - Tool type icons
|
|
- [ ] `ssh-keys.tsx` - Key management icons
|
|
- [ ] `profile.tsx` - Profile icons
|
|
- [ ] `commit-dialog.tsx` - Dialog icons
|
|
- [ ] `syntax-highlighter.tsx` - Copy icon
|
|
- [ ] `code-editor.tsx` - Edit icons
|
|
- [ ] All button components with icons
|
|
|
|
## CSS Requirements
|
|
|
|
```css
|
|
.icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.icon-sm { width: 16px; height: 16px; }
|
|
.icon-md { width: 20px; height: 20px; }
|
|
.icon-lg { width: 24px; height: 24px; }
|
|
.icon-xl { width: 32px; height: 32px; }
|
|
```
|
|
|
|
## Accessibility Requirements
|
|
|
|
1. All functional icons must have `aria-label`
|
|
2. Decorative icons must have `aria-hidden="true"`
|
|
3. Interactive icons must be focusable
|
|
4. Color contrast ratio ≥ 4.5:1
|
|
|
|
## Dependencies
|
|
|
|
- `@phosphor-icons/react` - React component library
|