fix(react): fix icon rendering in v0.9 basic catalog#1031
fix(react): fix icon rendering in v0.9 basic catalog#1031ppazosp wants to merge 1 commit intogoogle:mainfrom
Conversation
Add camelCase to snake_case conversion for Material Symbols icon names. The A2UI spec uses camelCase names (e.g., skipPrevious, shoppingCart) but Material Symbols Outlined requires snake_case (skip_previous, shopping_cart). This matches the approach used in the Angular renderer and React v0_8 renderer.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds a toSnakeCase helper function to the Icon component to ensure icon names are correctly formatted for Material Symbols. Feedback was provided to improve the regex implementation to avoid generating leading underscores for capitalized input strings.
| * e.g., "shoppingCart" -> "shopping_cart", "skipPrevious" -> "skip_previous" | ||
| */ | ||
| function toSnakeCase(str: string): string { | ||
| return str.replace(/([A-Z])/g, '_$1').toLowerCase(); |
There was a problem hiding this comment.
The current implementation of toSnakeCase will produce a leading underscore for strings that start with an uppercase letter (e.g., 'ShoppingCart' becomes '_shopping_cart'). This is likely not the intended behavior for Material Symbols font ligatures.
A more robust implementation would handle this case correctly. Using a negative lookbehind (?<!^) can prevent matching an uppercase letter at the beginning of the string.
| return str.replace(/([A-Z])/g, '_$1').toLowerCase(); | |
| return str.replace(/(?<!^)([A-Z])/g, '_$1').toLowerCase(); |
There was a problem hiding this comment.
The A2UI schema enforces camelCase icon names via a Zod enum (ICON_NAMES in basic_components.ts), so PascalCase input is never valid. This regex is also identical to Angular v0.9 (icon.component.ts:98) and React v0.8 (Icon.tsx:29). Changing it here would break consistency across renderers.
1 participant
Description
Adds camelCase-to-snake_case conversion for icon names in the React v0.9 Icon component.
The A2UI spec defines icon names in camelCase (e.g.,
shoppingCart) but Material Symbols Outlined font requires snake_case ligatures (shopping_cart). Without this conversion, multi-word icon names rendered as empty/broken boxes. The fix matches the existing pattern used in Angular v0.9 and React v0.8 renderers.Fixes #946
Pre-launch Checklist