Implement Custom Bar Icons

As a Host, I want custom icons for bar-specific items that FontAwesome doesn’t provide, So that the app can accurately represent bar tools, equipment, and products with visually appropriate icons.

Acceptance Criteria

Given I am viewing or adding bar tools, equipment, or products
When the system displays icons for these items
Then custom icons are available for:
- Bar Tools:
  - Strainer (Hawthorne, fine mesh, etc.)
  - Mixing spoon (bar spoon)
  - Shaker (cocktail shaker)
  - Jigger (measuring tool)
  - Cutting board (wooden cutting board)
- Glassware & Containers:
  - Shot glass
  - Glass beer bottle
  - Aluminum can (12oz standard)
  - Slender can (Red Bull style)
  - Red Stripe bottle (distinctive shape)
  - Beer bottle (generic beer bottle)
  - Punch bowl (large bowl for punch)
  - Rock glass (tall glass for rocks)
  - Highball glass (tall glass for highballs)
  - Coupe glass (small glass for cocktails)
  - Martini glass (small glass for martinis)
  - Whiskey glass (small glass for whiskey)
  - Wine glass (small glass for wine)
  - Champagne glass (small glass for champagne)
  - Beer mug (large glass for beer)
  - Beer stein (large glass for beer)
  - Beer pilsner (small glass for beer)
  - Beer mug (large glass for beer)
  - Beer stein (large glass for beer)
  - Beer pilsner (small glass for beer)
  - Beer mug (large glass for beer)
  - Beer stein (large glass for beer)
  - Beer pilsner (small glass for beer)
  - Beer mug (large glass for beer)
- Equipment:
  - Keg tap (beer tap handle)
  - Bottle cooler (wine/bottle chiller)
  - Kegerator (beer dispensing system)
- Other:
  - Pourer (speed pourer)
  - Recipe card (cocktail recipe card)
  - Lime wheel (lime wheel for garnish)
  - Orange wheel (orange wheel for garnish)
  - Lemon wheel (lemon wheel for garnish)
  - Mint leaf (mint leaf for garnish)
  - Cherry (cherry for garnish)
  - Olive (olive for garnish)
  - Cucumber (cucumber for garnish)
  - Tomato (tomato for garnish)
  - Onion (onion for garnish)
  - Garlic (garlic for garnish)
And these custom icons are:
- Consistent in style with FontAwesome icons
- Scalable to different sizes (sm, md, lg, xl, 2xl)
- Available in the same color variants as standard icons
- Accessible via the Icon component or a CustomIcon component
And the icons can be used throughout the app:
- In inventory lists (tools, equipment, products)
- In product detail screens
- In recipe cards and instructions
- In bar setup configurations
- In shopping lists
And there is a fallback mechanism if a custom icon is missing
And the icon system is extensible for future custom icons

Implementation Status

⏳ NOT YET IMPLEMENTED

Priority

Medium - Improves visual clarity and app polish

BarTool, Equipment, Product, Glassware, Recipe

Implementation Notes

Icon Format Options:

SVG icons stored in shaker/assets/icons/ or shaker/components/icons/custom/
React Native compatible format (SVG or PNG at multiple sizes)
Consider using react-native-svg for scalable vector icons

Icon Component Enhancement:

Extend shaker/components/Icon.tsx to support custom icons
Or create shaker/components/CustomIcon.tsx for bar-specific icons
Maintain same API as Icon component for consistency

Icon Mapping:

Create icon mapping file: shaker/lib/icons/customIcons.ts
Map icon names to asset paths or SVG components
Support icon name aliases (e.g., “strainer” → “hawthorne-strainer”)

Required Custom Icons:

Strainer - Hawthorne strainer or fine mesh strainer
Shot Glass - Small shot glass icon
Mixing Spoon - Bar spoon with spiral handle
Pourer - Speed pourer/spout
Glass Beer Bottle - Standard glass beer bottle
Aluminum Can 12oz - Standard 12oz aluminum can
Slender Can - Red Bull style slender can
Red Stripe Bottle - Distinctive Red Stripe beer bottle shape
Keg Tap - Beer tap handle/keg tap
Shaker - Cocktail shaker (Boston or cobbler style)
Jigger - Measuring jigger tool
Recipe Card - Cocktail recipe card/note card
Bottle Cooler - Wine/bottle chiller bucket
Kegerator - Beer dispensing system/kegerator

Design Requirements:

Icons should be monochrome or support color variants
Line weight should match FontAwesome style (medium weight)
Clear silhouette for recognition at small sizes
Consistent stroke width across all custom icons

Integration Points:

shaker/data/tools/index.ts - Tool category icons
shaker/data/equipment/index.ts - Equipment type icons
shaker/data/products/index.ts - Product type icons
shaker/app/(tabs)/inventory/tools/ - Tool list and detail screens
shaker/app/(tabs)/inventory/equipment/ - Equipment screens
shaker/app/(tabs)/recipes/ - Recipe screens

Files to Create/Modify:

shaker/components/icons/CustomIcon.tsx - Custom icon component
shaker/lib/icons/customIcons.ts - Icon mapping and registry
shaker/assets/icons/ - Icon asset files (SVG or PNG)
shaker/components/Icon.tsx - Extend to support custom icons
shaker/types/icons.ts - Type definitions for custom icon names

Fallback Strategy:

If custom icon not found, fall back to closest FontAwesome icon
Log warning in development mode
Display generic “image” or “tool” icon as last resort

Add Bar Tools to Inventory (bar_setups/add_bar_tools_to_inventory.md)
Add Equipment to Inventory (bar_setups/add_equipment_to_inventory.md)
Add Glassware to Inventory (bar_setups/add_glassware_to_inventory.md)
Product Type Icons - Custom icons for product types

Future Enhancements

Icon editor/upload for user-created custom icons
Icon library browser for selecting icons
Icon variants (filled, outlined, duotone)
Animated icons for active states
Icon themes (minimal, detailed, realistic)