（2491期）Icons – SVG图标工程化与无障碍最佳实践

SVG图标工程化与无障碍最佳实践 现代Web图标最佳实践指南，涵盖SVG实现、无障碍访问、性能优化与一致性规范 使用说明 核心用法 Icons 是一套完整的前端图标工程化规范，专注于SVG现代标准而非过时的Icon Fonts。核心实践包括： SVG优先：利用原生ARIA支持、多色能力、tree-shaking优化包体积 可访问性模式：区分装饰性图标（aria-hidden）与信息性图标（aria-label/sr-only），内嵌SVG需<title>作为首子元素 色彩继承：使用currentColor实现CSS驱动的动态换色，自动响应hover状态 尺寸系统：16/20/24/32px标准网格，线宽与尺寸按比例匹配（16px配1px，24px配1.5px） Symbol Sprites：高频复用场景通过<symbol>+<use>减少DOM节点 显著优点 工程化成熟度：从设计系统一致性（线宽匹配字重）到性能基准测试（1000图标场景），覆盖完整链路 无障碍专业：针对屏幕阅读器的精细处理（IE/Edge的focusable陷阱、ID唯一性、FOIT规避） 实用细节丰富：44px触摸目标计算、1em文本同步缩放、光学对齐 vs 数学对齐等一线经验 潜在局限 浏览器兼容性成本：外部Sprites需Safari polyfill，IE11被列为"仅遗留支持" 学习曲线：需理解ARIA属性差异、currentColor机制、stroke/fill切换等概念 设计系统约束：强制单一套系、命名规范（appearance over meaning）对既有项目有迁移成本 无自动化工具链：纯文档规范，未提供构建插件或扫描工具检测"Missing aria-hidden"等错误 适合人群 构建组件库的设计系统团队 需要WCAG合规的企业级中后台 追求极致Core Web Vitals的性能敏感项目 常规风险 无障碍属性遗漏导致屏幕阅读器体验断裂 混合线型风格造成的视觉不一致 过度工程化：为10个图标引入整套Lucide/Heroicons的tree-shaking成本 原始说明 Implement accessible icons with proper sizing, color inheritance, and performance.