fix: add missing size property to DynamicIcon class

[geekalaa]

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

• Bug fix (non-breaking change which fixes an issue)

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you successfully ran tests with your changes locally?

Description

Fixes #5660 where rx.icon size attribute was ignored when using dynamic state variables vs static strings.
The DynamicIcon class was missing the size: Var[int] property definition, causing size to be treated as CSS style instead of a direct component prop. This resulted in dynamic icons falling back to Lucide React's default size of 24px instead of using the specified size.

Problem

• rx.icon("home", size=16) worked correctly (16x16 pixels)
• rx.icon(State.icon, size=16) was broken (fell back to Lucide's default 24px)

Root Cause

The DynamicIcon class was missing the size: Var[int] property definition, causing the size parameter to be treated as a CSS style instead of a direct component
prop.

Solution

Added the missing size: Var[int] property to the DynamicIcon class, ensuring consistent size handling between static and dynamic icons.

Testing

• Verified both static and dynamic icons now render with proper component props
• All existing icon tests pass

closes #5660

[greptile-apps]

Greptile Summary

This PR fixes a bug where the size attribute was ignored when using dynamic state variables with rx.icon. The issue stemmed from an inconsistency between two icon rendering paths in the codebase:

1. Static icons use the Icon class which has a size: Var[int] property defined (line 24)
2. Dynamic icons use the DynamicIcon class which was missing this property definition

When IconButton.create() processes icons, it expects both static and dynamic icons to accept the size parameter as a component property. The IconButton class automatically sets icon sizes based on its own size prop, defaulting to "12px" if not specified. Without the size property in DynamicIcon, this parameter was being treated as a CSS style rather than a component prop, causing dynamic icons to fall back to Lucide React's default 24px size.

The fix adds the missing size: Var[int] property to the DynamicIcon class (line 96), ensuring both icon types have identical API surfaces. This change maintains consistency in the component hierarchy where both Icon and DynamicIcon inherit from LucideIconComponent and should expose the same properties for size handling.

Confidence score: 5/5

• This PR is safe to merge with minimal risk
• Score reflects a simple property addition that fixes a clear inconsistency between related classes
• No files require special attention

_{1 file reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

[adhami3310]

that looks correct, running pre-commit run --all-files should fix the CI issue, thanks for the PR!

[codspeed-hq]

CodSpeed Performance Report

Merging #5663 will not alter performance

_{Comparing geekalaa:fix-dynamic-icon-size-5660 (a055fff) with main (a1432bc)¹}

Summary

✅ 8 untouched benchmarks

Footnotes

1. No successful run was found on main (b6c4905) during the generation of this report, so a1432bc was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩