Attach native props to the outer element of UDesign Icon components.
npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-icon
Please help me install this Agent Skill. Skill: cpn-basic-icon Source: https://github.com/UCloud-FE/udesign-cli/tree/main/skills/cpn-basic-icon Command: npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-icon
AI often misuses or fails to attach extra native props when rendering icons. This Skill ensures props like style or className are correctly applied to the Icon component's outer element, preventing styling inconsistencies.
Import the Icon component from the UDesign library and render it with a type prop to verify correct usage.
High-intent search queries and answers about installing and using this skill.
To pass native props like style and className to a UI icon component correctly, attach them to the outer element to ensure consistent styling and prevent rendering inconsistencies.
Icon styling breaks because AI often fails to attach extra native props to the outer element, causing styling inconsistencies that require ensuring non-icon props are passed correctly.
To import and render an icon from the UDesign component library, import the Icon component and render it with a type prop to verify correct usage and ensure the icon font CSS is loaded.
Yes, you can use a custom prefix for icon fonts with ConfigProvider by adapting the configuration to ensure the UDesign components render correctly with your custom prefixes.
No, you do not need external libraries to render UDesign icons, as this approach satisfies requirements to use only UDesign components and import the icon font CSS directly.
The best way to ensure consistent behavior when rendering UI icons is to ensure non-icon props are passed to the component's outer element, enabling consistent styling without external libraries.
GatsbyhateyouOrganize CSS for 8-bit components with custom properties and pixel fonts.
UCloud-FEGuide React UI development using the UDesign Spin component as a wrapper div.
justinlevinedotmeCreate reusable Radix UI and Tailwind CSS components for React projects.
jiaiyanDisplay and customize SVG icons with size, color, and depth in Vue/Nuive UI projects.
