Icons 图标

🎯 图标的作用

图标是现代 Web 应用中不可或缺的视觉元素，它们能够：

• 提升用户体验：通过直观的视觉符号快速传达功能和含义
• 节省界面空间：用简洁的图形替代冗长的文字描述
• 增强视觉层次：帮助用户快速识别和定位功能区域
• 统一设计语言：保持应用界面的一致性和专业性

💡 开发意义

QXS-BNS 图标系统的设计初衷是为开发团队提供：

🔧 开发效率

• 统一标准：避免重复设计和开发相似图标
• 即插即用：开箱即用的图标组件，无需额外配置
• 类型安全：完整的 TypeScript 支持，减少运行时错误

🎨 设计一致性

• 风格统一：所有图标遵循相同的设计规范
• 尺寸规范：标准化的图标尺寸和间距
• 主题适配：支持多种主题色彩和样式变化

🚀 性能优化

• 按需加载：只打包实际使用的图标，减少包体积
• 多种方案：支持 Vue 组件、Iconify、UnoCSS 等多种使用方式
• 智能识别：QxsIcon 组件自动识别图标类型，简化使用

📚 使用指南

快速开始

• 工作区内部使用 - 工作区开发规范
• 图标展示 - 查看所有可用图标和交互式配置

组件文档

• QxsIcon 组件 - 智能图标组件文档

图标类型详解

• Vue 组件图标 - 工作区内部推荐方式
• Iconify 图标 - 海量在线图标库
• UnoCSS 图标 - 编译时优化图标
• CSS 类图标 - 兼容现有图标字体
• 图片 URL 图标 - 自定义图片图标
• SVG Sprite 图标 - 本地 SVG 雪碧图