Define and render scalable SVG icons in wok-ui with SvgIcon and RemoteSvgIcon.
npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-icon
Please help me install this Agent Skill. Skill: wok-ui-icon Source: https://github.com/PeakTai/wok-ui/tree/main/skills/wok-ui-icon Command: npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-icon
Managing SVG icons in a UI library can be verbose and inconsistent. This skill introduces a unified approach to using wok-ui's SvgIcon for local icons and RemoteSvgIcon for on-demand remote icons, ensuring consistent sizing and coloring across the app.
Create a custom Icon by extending SvgIcon or RemoteSvgIcon and mount it in your UI.
High-intent search queries and answers about installing and using this skill.
You can render SVG icons by extending the SvgIcon component to embed local SVG code, which ensures consistent sizing and coloring. This approach provides type-safe usage and allows interaction via onClick handlers.
Loading SVG icons on demand is best handled using RemoteSvgIcon, which fetches remote icons and caches them in memory for performance. This enables on-demand loading and theming across diverse components.
Yes, you can customize SVG icons programmatically using the setSize and setColor APIs. These methods provide a unified approach to theming, ensuring uniform appearance and interaction across your application.
You can attach click handlers to SVG icons by utilizing the onClick property provided by the SvgIcon and RemoteSvgIcon components. This enables type-safe interactive behavior directly within your icon definitions.
Use local SvgIcon when embedding custom SVG code to ensure maximum performance, and use RemoteSvgIcon when you need on-demand loading and memory caching. Both provide a consistent API for sizing and coloring.
PeakTaiGuide wok-ui project creation, installation, and routing with npm.
BrunoSantanaDeveloperVerify UI components trigger their imported event handlers via integration tests.
0xBigBossGuide React hooks, effects, and component design in .tsx/.jsx codebases.
farmanlabConvert Figma MCP design data into Tailwind-based HTML/CSS with data attributes.
