什么是 图标？

图标技能专注于从传统的图标字体过渡到现代 SVG 标准，确保高性能和原生可访问性。它为处理装饰性和信息性图标提供了健壮的架构，利用 aria-hidden 和 aria-labelledby 等模式确保与屏幕阅读器的兼容性。通过利用 Openclaw Skills 资源，开发人员可以创建主题感知组件，利用 currentColor 实现无缝颜色继承，并建立与排版完美缩放的一致尺寸网格。

下载入口:https://github.com/openclaw/skills/tree/main/skills/ivangdavila/icons

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

图标 应用场景

• 为精简的用户界面创建可访问的纯图标按钮。
• 实现可根据明暗模式自动调整的主题响应式图标。
• 通过使用 tree-shaken SVG 集合替换庞大的字体库来优化页面加载速度。
• 构建具有合适触摸目标和描边粗细的移动优先界面。
• 使用符号精灵（symbol sprites）管理复杂的图标系统，以减少 DOM 开销。

1. 识别图标的功能角色，确定其是否需要可访问标签或应向辅助技术隐藏。
2. 准备 SVG 资产，移除硬编码的颜色属性，以实现通过 CSS 进行动态样式设置。
3. 使用内联 SVG（用于关键路径元素）或符号精灵（用于重复资产）来实现图标。
4. 根据 UI 上下文应用标准化的尺寸和描边粗细（例如，密集布局为 16px，主要操作为 24px）。
5. 验证实现是否遵循 Openclaw Skills 关于性能和视觉一致性的最佳实践。

图标 配置指南

要开始使用这些图标模式，请确保您的环境支持 SVG 操作和 CSS 继承。您可以使用以下 CSS 模式设置基础图标组件：

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}

如果您使用的是库，请安装支持 tree-shakable 的集合以最小化包体积：

npm install lucide-react # 或您喜欢的基于 SVG 的图标库

图标 数据架构与分类体系

该技能通过结构化的属性和样式方法组织图标元数据和实现模式：

name: Icons
description: Implement accessible icons with proper sizing, color inheritance, and performance.
metadata: {"clawdbot":{"emoji":"??","requires":{},"os":["linux","darwin","win32"]}}

SVG vs Icon Fonts

SVG is the modern standard:

• Better accessibility (native ARIA support)
• No flash of invisible/wrong icon (FOIT)
• Multicolor support
• Smaller bundles with tree-shaking

Only consider icon fonts for legacy IE11 support.

Accessibility Patterns

Decorative icons (next to visible text):

  
  Save

Informative icons (standalone, no label):

  




  
  Save document

SVG with accessible name:

Key rules:

• aria-hidden="true" on SVGs that duplicate visible text
• focusable="false" prevents unwanted tab stops in IE/Edge