Overview

This issue tracks multiple improvements and fixes for the icon registry that were identified in PR #28 but marked as out of scope for that PR.

Related PR: #28
Comment thread: #28 (comment)

🐛 Styling Bugs

1. Malformed className in accessibility-icon.json

• File: public/r/accessibility-icon.json
• Issue: className contains cursor - pointer (with spaces) instead of cursor-pointer
• Fix: Update to className={\cursor-pointer ${className}`}`

🔧 Code Consistency Issues

2. Missing/inconsistent prop usage across icons

• File: public/r/ampersand-icon.json
• Issue: AmpersandIcon ignores color and strokeWidth props, only uses size and className
• Fix: Accept and use all AnimatedIconProps (color, strokeWidth, size, className)

3. Missing useCallback for animation handlers

Multiple icon components don't memoize their animation functions with useCallback, causing unnecessary re-renders:

• public/r/arrow-big-down-icon.json
• public/r/currency-dollar-icon.json
• public/r/currency-euro-icon.json

Fix: Wrap start and stop functions in useCallback with appropriate dependencies

4. Inconsistent component structure in currency-euro-icon

• File: public/r/currency-euro-icon.json
• Issue: Uses motion.div wrapping a regular <svg> instead of motion.svg directly
• Fix: Refactor to use motion.svg directly like other icons

5. Missing dependency array in useImperativeHandle

• File: public/r/star-icon.json
• Issue: useImperativeHandle missing its dependency array [start, stop]
• Fix: Add dependency array to satisfy React's exhaustive-deps rule

6. Inconsistent implementation pattern

• File: public/r/layout-sidebar-right-collapse-icon.json
• Issue: Uses framer-motion instead of motion/react, lacks forwardRef, uses React.FC instead of the standard pattern
• Fix: Refactor to match other icons (forwardRef, motion/react, useAnimate, AnimatedIconHandle)

♿ Accessibility Issues

7. Missing accessibility attributes in MySQL icon

• File: public/r/mysql-icon.json
• Issue: Interactive SVG lacks role="img" and aria-label attributes
• Fix: Add accessibility attributes for screen readers

🔴 Type Safety Issues

8. Type mismatch in mysql-icon

• File: public/r/mysql-icon.json
• Issue: start function is async (returns Promise<void>) but AnimatedIconHandle.startAnimation is typed as () => void
• Fix: Either remove async/await or update interface to accept Promise<void> return type

⚙️ Configuration Issues

9. Registry misconfiguration for telephone/stadium icons

• Files: public/r/telephone-icon.json and public/r/stadium-icon.json
• Issue: Both reference the same source file (icons/telephone-icon.tsx), creating duplication. Additionally, stadium-icon.json references non-existent icons/stadium-icon.tsx
• Fix: Resolve the registry duplication and create separate source files or remove duplicate entry

🛠️ Script Improvements

10. Missing error handling in generate-registry script

• File: scripts/generate-registry.ts
• Issue: File system operations lack try-catch blocks (readdir, readFile, writeFile)
• Fix: Add error handling with helpful error messages for better debugging

Acceptance Criteria

• All className bugs fixed
• All icons use consistent AnimatedIconProps
• All animation handlers use useCallback consistently
• All icons use motion.svg directly (no extra wrappers)
• All useImperativeHandle calls have dependency arrays
• layout-sidebar-right-collapse-icon refactored to standard pattern
• Accessibility attributes added to all interactive icons
• Type safety issues resolved
• Registry configuration cleaned up (telephone/stadium icons)
• Error handling added to generate-registry script

Requested by: @luth-v

📎 Related Review Comments from PR #28

The following review comments have been tracked in this issue:

1. package.json - npm script syntax ✅ Already addressed
2. accessibility-icon.json - malformed className
3. ampersand-icon.json - missing props
4. arrow-big-down-icon.json - missing useCallback
5. currency-dollar-icon.json - missing useCallback
6. currency-euro-icon.json - missing useCallback & wrapper
7. layout-sidebar-right-collapse-icon.json - inconsistent pattern
8. mysql-icon.json - accessibility & type mismatch
9. star-icon.json - missing dependency array
10. telephone-icon.json - registry misconfiguration
11. generate-registry.ts - missing error handling
12. rosette-discount-check-icon.json - shared types duplication