feat: add new icons and update README with icon details

.claude/settings.local.json

@@ -37,7 +37,10 @@
       "Bash(done)",
       "Bash(eslint:*)",
       "Bash(bunx eslint:*)",
-      "Bash(bun test:*)"
+      "Bash(bun test:*)",
+      "Bash(136*100/234)",
+      "Bash(\")",
+      "Bash(python3:*)"
     ]
   }
 }

fakemui/icons/Bell.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Bell = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M56.2 104a71.9 71.9 0 0 1 72.3-72c39.6.3 71.3 33.2 71.3 72.9V112c0 35.8 7.5 56.6 14.1 68a8 8 0 0 1-6.9 12H49a8 8 0 0 1-6.9-12c6.6-11.4 14.1-32.2 14.1-68Z" />
+    <path d="M96 192v8a32 32 0 0 0 64 0v-8" />
+  </Icon>
+)

fakemui/icons/Calendar.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Calendar = (props: IconProps) => (
+  <Icon {...props}>
+    <rect x="40" y="40" width="176" height="176" rx="8" />
+    <line x1="176" y1="24" x2="176" y2="56" />
+    <line x1="80" y1="24" x2="80" y2="56" />
+    <line x1="40" y1="88" x2="216" y2="88" />
+  </Icon>
+)

fakemui/icons/Check.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Check = (props: IconProps) => (
+  <Icon {...props}>
+    <polyline points="216 72 104 184 48 128" />
+  </Icon>
+)

fakemui/icons/ChevronDown.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const ChevronDown = (props: IconProps) => (
+  <Icon {...props}>
+    <polyline points="48 96 128 176 208 96" />
+  </Icon>
+)

fakemui/icons/ChevronLeft.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const ChevronLeft = (props: IconProps) => (
+  <Icon {...props}>
+    <polyline points="160 208 80 128 160 48" />
+  </Icon>
+)

fakemui/icons/ChevronRight.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const ChevronRight = (props: IconProps) => (
+  <Icon {...props}>
+    <polyline points="96 48 176 128 96 208" />
+  </Icon>
+)

fakemui/icons/ChevronUp.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const ChevronUp = (props: IconProps) => (
+  <Icon {...props}>
+    <polyline points="208 160 128 80 48 160" />
+  </Icon>
+)

fakemui/icons/Clock.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Clock = (props: IconProps) => (
+  <Icon {...props}>
+    <circle cx="128" cy="128" r="96" />
+    <polyline points="128 72 128 128 184 128" />
+  </Icon>
+)

fakemui/icons/Eye.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Eye = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M128 56C48 56 16 128 16 128s32 72 112 72 112-72 112-72-32-72-112-72Z" />
+    <circle cx="128" cy="128" r="40" />
+  </Icon>
+)

fakemui/icons/EyeSlash.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const EyeSlash = (props: IconProps) => (
+  <Icon {...props}>
+    <line x1="201.14" y1="127.31" x2="224" y2="166.93" />
+    <line x1="154.18" y1="149.26" x2="161.76" y2="189.03" />
+    <line x1="101.82" y1="149.26" x2="94.24" y2="189.03" />
+    <line x1="54.86" y1="127.31" x2="32" y2="166.93" />
+    <path d="M32 104.36c21.25-39.98 64.56-64.36 96-64.36s74.75 24.38 96 64.36" />
+  </Icon>
+)

fakemui/icons/Heart.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Heart = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M128 216S28 160 28 92a52 52 0 0 1 100-20h0a52 52 0 0 1 100 20c0 68-100 124-100 124Z" />
+  </Icon>
+)

fakemui/icons/Mail.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Mail = (props: IconProps) => (
+  <Icon {...props}>
+    <rect x="32" y="48" width="192" height="160" rx="8" />
+    <polyline points="224 56 128 144 32 56" />
+  </Icon>
+)

fakemui/icons/Menu.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Menu = (props: IconProps) => (
+  <Icon {...props}>
+    <line x1="40" y1="128" x2="216" y2="128" />
+    <line x1="40" y1="64" x2="216" y2="64" />
+    <line x1="40" y1="192" x2="216" y2="192" />
+  </Icon>
+)

fakemui/icons/Pencil.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Pencil = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M92.69 216H48a8 8 0 0 1-8-8v-44.69a8 8 0 0 1 2.34-5.65L165.66 34.34a8 8 0 0 1 11.31 0L221.66 79a8 8 0 0 1 0 11.31L98.34 213.66a8 8 0 0 1-5.65 2.34Z" />
+    <line x1="136" y1="64" x2="192" y2="120" />
+    <line x1="95.49" y1="215.49" x2="40.51" y2="160.51" />
+  </Icon>
+)

fakemui/icons/README.md

@@ -25,20 +25,44 @@ function MyComponent() {
 
 ## Available Icons
 
-Current icon count: **7 icons**
+Current icon count: **27 icons**
 
-### Actions
+### Actions (5)
 - `Plus` - Add, create, new
 - `Trash` - Delete, remove
 - `Copy` - Duplicate, copy
+- `Check` - Confirm, success, done
+- `X` - Close, cancel, dismiss
 
-### Navigation
+### Navigation (7)
 - `ArrowUp` - Move up, scroll up
 - `ArrowDown` - Move down, scroll down
 - `ArrowClockwise` - Refresh, reload, retry
+- `ChevronUp` - Expand up, collapse
+- `ChevronDown` - Expand down, show more
+- `ChevronLeft` - Previous, back
+- `ChevronRight` - Next, forward
 
-### Files
+### Files & UI (8)
 - `FloppyDisk` - Save, export
+- `Search` - Find, filter
+- `Settings` - Configure, preferences
+- `User` - Profile, account
+- `Menu` - Hamburger menu, navigation
+- `Eye` - View, show, visible
+- `EyeSlash` - Hide, hidden, password
+- `Pencil` - Edit, modify
+
+### Communication & Time (4)
+- `Calendar` - Date, schedule, events
+- `Clock` - Time, duration
+- `Mail` - Email, message, contact
+- `Bell` - Notifications, alerts
+
+### Social (3)
+- `Star` - Favorite, bookmark, featured
+- `Heart` - Like, love, favorite
+- `Share` - Share, export, send
 
 ---
 
@@ -219,23 +243,23 @@ export const Plus = (props: IconProps) => (
 - [x] ArrowClockwise
 - [x] FloppyDisk
 
-### Phase 2: Common Icons (0/20) 🚧
-- [ ] Check
-- [ ] X (Close)
-- [ ] ChevronUp/Down/Left/Right (4 icons)
-- [ ] Search
-- [ ] Settings
-- [ ] User
-- [ ] Menu
-- [ ] Eye/EyeSlash
-- [ ] Edit (Pencil)
-- [ ] Calendar
-- [ ] Clock
-- [ ] Mail
-- [ ] Bell
-- [ ] Star
-- [ ] Heart
-- [ ] Share
+### Phase 2: Common Icons (20/20) ✅
+- [x] Check
+- [x] X (Close)
+- [x] ChevronUp/Down/Left/Right (4 icons)
+- [x] Search
+- [x] Settings
+- [x] User
+- [x] Menu
+- [x] Eye/EyeSlash
+- [x] Edit (Pencil)
+- [x] Calendar
+- [x] Clock
+- [x] Mail
+- [x] Bell
+- [x] Star
+- [x] Heart
+- [x] Share
 
 ### Phase 3: Specialized Icons (0/30+) ⏳
 Add as needed based on component migration

fakemui/icons/Search.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Search = (props: IconProps) => (
+  <Icon {...props}>
+    <circle cx="116" cy="116" r="84" />
+    <line x1="175.4" y1="175.4" x2="224" y2="224" />
+  </Icon>
+)

fakemui/icons/Settings.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Settings = (props: IconProps) => (
+  <Icon {...props}>
+    <circle cx="128" cy="128" r="48" />
+    <path d="M197.4 80.7a73.6 73.6 0 0 1 6.3 10.9L229.6 106a102.9 102.9 0 0 1 0 44l-26 14.4a73.6 73.6 0 0 1-6.3 10.9l.5 29.7a104 104 0 0 1-38.1 22.1l-23.1-19.8a73.6 73.6 0 0 1-12.6 0L100.8 227a104 104 0 0 1-38.1-22.1l.5-29.7a73.6 73.6 0 0 1-6.3-10.9L26.4 150a102.9 102.9 0 0 1 0-44l26-14.4a73.6 73.6 0 0 1 6.3-10.9l-.5-29.7A104 104 0 0 1 96.3 29l23.1 19.8a73.6 73.6 0 0 1 12.6 0L155.2 29a104 104 0 0 1 38.1 22.1Z" />
+  </Icon>
+)

fakemui/icons/Share.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Share = (props: IconProps) => (
+  <Icon {...props}>
+    <circle cx="176" cy="64" r="32" />
+    <circle cx="80" cy="128" r="32" />
+    <circle cx="176" cy="192" r="32" />
+    <line x1="108.3" y1="142.7" x2="147.7" y2="177.3" />
+    <line x1="108.3" y1="113.3" x2="147.7" y2="78.7" />
+  </Icon>
+)

fakemui/icons/Star.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Star = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M132.4 190.7l50.4 32c6.5 4.1 14.5-2 12.6-9.5l-14.6-57.4a8.7 8.7 0 0 1 2.9-8.8l45.2-37.7c5.9-4.9 2.9-14.8-4.8-15.3l-59-3.8a8.3 8.3 0 0 1-7.3-5.4l-22-55.4a8.3 8.3 0 0 0-15.6 0l-22 55.4a8.3 8.3 0 0 1-7.3 5.4l-59 3.8c-7.7.5-10.7 10.4-4.8 15.3L72.3 147a8.7 8.7 0 0 1 2.9 8.8l-14.6 57.4c-1.9 7.5 6.1 13.6 12.6 9.5l50.4-32a8.1 8.1 0 0 1 8.8 0Z" />
+  </Icon>
+)

fakemui/icons/User.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const User = (props: IconProps) => (
+  <Icon {...props}>
+    <circle cx="128" cy="96" r="64" />
+    <path d="M30.989 215.99064a112.03731 112.03731 0 0 1 194.02311.002" />
+  </Icon>
+)

fakemui/icons/X.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const X = (props: IconProps) => (
+  <Icon {...props}>
+    <line x1="200" y1="56" x2="56" y2="200" />
+    <line x1="200" y1="200" x2="56" y2="56" />
+  </Icon>
+)

fakemui/icons/index.ts

@@ -4,11 +4,39 @@
 export { Icon } from './Icon'
 export type { IconProps } from './Icon'
 
-// Common icons
+// Actions
 export { Plus } from './Plus'
 export { Trash } from './Trash'
 export { Copy } from './Copy'
+export { Check } from './Check'
+export { X } from './X'
+
+// Navigation
 export { ArrowUp } from './ArrowUp'
 export { ArrowDown } from './ArrowDown'
 export { ArrowClockwise } from './ArrowClockwise'
+export { ChevronUp } from './ChevronUp'
+export { ChevronDown } from './ChevronDown'
+export { ChevronLeft } from './ChevronLeft'
+export { ChevronRight } from './ChevronRight'
+
+// Files & UI
 export { FloppyDisk } from './FloppyDisk'
+export { Search } from './Search'
+export { Settings } from './Settings'
+export { User } from './User'
+export { Menu } from './Menu'
+export { Eye } from './Eye'
+export { EyeSlash } from './EyeSlash'
+export { Pencil } from './Pencil'
+
+// Communication & Time
+export { Calendar } from './Calendar'
+export { Clock } from './Clock'
+export { Mail } from './Mail'
+export { Bell } from './Bell'
+
+// Social
+export { Star } from './Star'
+export { Heart } from './Heart'
+export { Share } from './Share'

fakemui/index.ts

@@ -4,13 +4,38 @@
 // Icons
 export {
   Icon,
+  // Actions
   Plus,
   Trash,
   Copy,
+  Check,
+  X,
+  // Navigation
   ArrowUp,
   ArrowDown,
   ArrowClockwise,
+  ChevronUp,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  // Files & UI
   FloppyDisk,
+  Search,
+  Settings,
+  User,
+  Menu,
+  Eye,
+  EyeSlash,
+  Pencil,
+  // Communication & Time
+  Calendar,
+  Clock,
+  Mail,
+  Bell,
+  // Social
+  Star,
+  Heart,
+  Share,
 } from './icons'
 export type { IconProps } from './icons'