Skip to content

Add Lucide Icons support for Button and Icon components (#77) #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 3, 2025

Conversation

maclong9
Copy link
Owner

@maclong9 maclong9 commented Jul 2, 2025

Summary

  • Implements comprehensive Lucide Icons support for UI components
  • Adds type-safe LucideIcon enum with 150+ predefined icons
  • Creates dedicated Icon component for standalone icon usage
  • Enhances SystemImage and Button components with Lucide support
  • Includes CSS management utilities for CDN/local asset loading
  • Maintains full backward compatibility with existing code

Changes Made

  • LucideIcon enum: Type-safe access to 150+ Lucide icons with categories
  • Icon component: Standalone component with size presets and convenience methods
  • SystemImage updates: Auto-detection of Lucide vs system icons with appropriate rendering
  • Button enhancements: Direct LucideIcon support in systemImage parameter
  • LucideStyles utility: CSS management for CDN and local asset loading
  • Comprehensive tests: 27 new tests covering all functionality

Technical Details

  • Uses <i> tags for Lucide icons vs <span> for system icons
  • CSS classes follow pattern: lucide lucide-{icon-name}
  • Automatic ARIA label generation from icon display names
  • Conditional CSS loading based on icon usage detection
  • SwiftUI-like API patterns for consistency

Test Coverage

All 394 tests passing, including 27 new Lucide-specific tests covering:

  • Enum functionality and type safety
  • Component rendering and integration
  • Accessibility features
  • CSS management utilities
  • Edge cases and error handling

Breaking Changes

None - maintains full backward compatibility

Closes #77

maclong9 added 2 commits July 2, 2025 21:21
- Create LucideIcon enum with 150+ predefined icons for type safety
- Add dedicated Icon component for standalone icon usage with size presets
- Update SystemImage to auto-detect and render Lucide vs system icons
- Enhance Button component with direct LucideIcon support
- Add LucideStyles utility for CSS management (CDN/local options)
- Include comprehensive test suite covering all functionality
- Maintain backward compatibility with existing SystemImage usage
- Support accessibility features with automatic ARIA labels
…ines refactor

- Merge Lucide Icons functionality with updated naming conventions
- Preserve type-safe LucideIcon enum and auto-detection logic
- Update SystemImage to use buildMarkupTag() method naming
- Maintain <i> tag for Lucide icons, <span> for system icons
- Ensure all Lucide functionality works with latest API changes
@maclong9 maclong9 merged commit 01f6c74 into main Jul 3, 2025
1 check failed
@maclong9 maclong9 deleted the feature/lucide-icons-support branch July 3, 2025 00:10
maclong9 added a commit that referenced this pull request Jul 7, 2025
…#83)

- Create LucideIcon enum with 150+ predefined icons for type safety
- Add dedicated Icon component for standalone icon usage with size presets
- Update SystemImage to auto-detect and render Lucide vs system icons
- Enhance Button component with direct LucideIcon support
- Add LucideStyles utility for CSS management (CDN/local options)
- Include comprehensive test suite covering all functionality
- Maintain backward compatibility with existing SystemImage usage
- Support accessibility features with automatic ARIA labels
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support Lucide Icons for Buttons and Icon Component
1 participant