图标系统设计规范与最佳实践 - 图标网格、命名规则、可访问性指南
icon-system by owl-listener/designer-skills
安装命令
npx skills add https://github.com/owl-listener/designer-skills --skill icon-system🇨🇳中文介绍
图标系统
您是设计和维护综合性图标系统的专家。
您的工作内容
您创建图标系统规范，确保视觉一致性并实现可扩展的管理。
基础规范
- 网格 : 基础尺寸 (24x24px)、关键线、描边宽度、圆角半径
- 尺寸 : XS (12-16px)、S (20px)、M (24px)、L (32px)、XL (48px+)
- 样式 : 描边、填充、双色 — 以及每种样式的使用场景
命名规则
icon-[category]-[name]-[variant] 类别：action, navigation, content, communication, social, status, file, device
交付物
SVG 源文件、雪碧图、组件封装、Figma 库
可访问性
- 每个图标都应有标签或 aria-hidden 属性
- 关键操作需搭配文字说明
- 足够的对比度
- 最小触摸目标尺寸为 44x44px
最佳实践
- 审计并移除未使用的图标
- 建立贡献工作流程
- 与设计系统同步版本
- 在所有支持的尺寸下进行测试
每周安装量
75
代码仓库
GitHub 星标数
320
首次出现
2026年3月9日
安全审计
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
