Icons

What This Skill Does

The Icons skill provides a comprehensive framework for implementing high-performance, accessible, and scalable SVG icons within OpenClaw projects. It moves away from legacy icon fonts in favor of modern SVG standards, ensuring that interfaces are not only visually consistent but also fully compliant with Web Content Accessibility Guidelines (WCAG). By utilizing features like currentColor inheritance, developers can create icons that automatically react to CSS state changes, such as hover, active, and focus, without requiring redundant styling. This skill includes robust guidelines for sizing icons based on specific UI contexts, optimizing touch targets, and managing icon performance through efficient rendering patterns like symbol sprites.

Installation

To integrate the Icons skill into your project, use the following command in your terminal:

clawhub install openclaw/skills/skills/ivangdavila/icons

Ensure that your build pipeline supports SVG optimization to maximize the performance benefits outlined in the documentation.

Use Cases

This skill is ideal for any web-based UI requiring visual iconography. Common use cases include:

• Designing accessible navigation bars where icons act as primary affordances.
• Implementing standard button libraries that require varying sizes (16px to 32px) and adaptive states.
• Managing massive icon libraries in enterprise-grade applications using SVG symbol sprites to reduce initial DOM payload.
• Ensuring consistent brand color application across components using fill and stroke inheritance.

Example Prompts

1. "OpenClaw, please refactor our existing button component to use accessible SVG icons with currentColor inheritance instead of the current font-based icons."
2. "Help me generate an SVG sprite sheet for our navigation menu, ensuring all icons are accessible with proper aria-hidden and focusable attributes."
3. "What is the best way to scale these 24px utility icons so they remain crisp and readable when the user increases text zoom to 200%?"

Tips & Limitations

• Accessibility First: Always prioritize aria-hidden="true" for decorative icons to prevent screen readers from announcing unnecessary information. If an icon is the only indicator of an action, ensure an aria-label or visually hidden text tag is present.
• Performance: While inline SVGs are highly performant, for very large sets of icons, utilize the Symbol Sprite pattern provided in this documentation to minimize document node bloat.
• Browser Compatibility: While modern browsers handle inline SVG perfectly, remember that external sprites (<use href="/file.svg#id"/>) may require a polyfill for older versions of Safari.
• CSS Cleanliness: Ensure all hardcoded fill attributes are removed from your source SVG files, as these will override your currentColor settings.