调整图标大小

图标大小主要通过 MuiIcon 编辑器控制，同时受到 IconButton 编辑器的影响。

主要控制：MuiIcon 编辑器

访问路径

1. 打开 VertiTab 设置页面
2. 点击侧边栏的"自定义主题"菜单
3. 选择要编辑的主题，点击"编辑"
4. 点击"🧩 组件自定义"标签页
5. 找到"Icon"配置卡片，点击展开

图标配置选项

默认属性设置

• 默认字体大小：选择 Inherit、Small、Medium、Large
• 默认颜色：设置图标的默认显示颜色

样式覆盖设置

• 自定义字体大小：通过滑条精确调节 8-48px
• 优先级：会覆盖所有图标的默认字体大小设置
• 实时预览：滑条调节时立即显示效果

操作步骤

1. 选择合适的默认字体大小级别
2. 如需精确控制，使用自定义字体大小滑条
3. 观察预览效果并调整到满意的大小

影响因素：IconButton 编辑器

访问路径

1. 在"组件自定义"标签页中
2. 找到"IconButton"配置卡片，点击展开

相关设置

默认属性

• 尺寸 (Size)：Small、Medium、Large
• 影响范围：图标按钮的整体大小，间接影响其中图标的显示效果

样式覆盖

• 内边距 (Padding)：调整图标按钮内部空间
• 外边距 (Margin)：调整按钮与周围元素的间距
• 间接影响：这些设置会影响图标在按钮中的视觉效果

两个编辑器的关系

编辑器	直接作用	间接影响
MuiIcon	控制图标本身大小	所有界面图标
IconButton	控制按钮容器大小	按钮内图标的显示效果

调整策略

全局图标大小调整

1. 优先使用 MuiIcon 编辑器
2. 通过"自定义字体大小"进行精确控制
3. 推荐范围：12-24px 适合大多数场景

按钮图标优化

1. 配合调整 IconButton 设置
2. 增加内边距可让图标看起来更舒适
3. 调整按钮尺寸可改善图标的点击体验

特殊场景处理

1. 小图标：8-12px，适用于辅助性元素
2. 标准图标：16-20px，适用于常规界面元素
3. 大图标：24-32px，适用于重要操作按钮

实际效果

• 菜单图标：设置菜单、导航等位置的图标
• 操作图标：关闭、最小化、刷新等功能图标
• 状态图标：加载、警告、成功等状态指示图标
• 装饰图标：界面美化和视觉引导图标

使用建议

1. 保持一致性：同类功能的图标使用相同大小
2. 考虑可用性：确保图标足够大，便于点击
3. 测试不同密度：在高分辨率屏幕上验证清晰度
4. 平衡美观与功能：既要美观也要实用

保存设置

所有调整会实时预览，点击主题编辑器的"保存"按钮保存更改。