如何在Sonner中隐藏Toast通知的图标

在Sonner项目中，Toast通知组件默认会显示一个状态图标（如成功/错误的图标）。但某些场景下，开发者可能需要隐藏这些图标以获得更简洁的UI效果。

问题背景

早期版本的Sonner组件存在一个限制：即使用户尝试通过传递null或空字符串给icon属性，也无法完全移除Toast通知中的图标。虽然可以通过传递空div元素来隐藏图标，但这会导致布局间距出现问题，影响视觉效果。

解决方案

在最新的更新中（#610版本），Sonner项目已经解决了这个问题。现在开发者可以通过以下方式轻松隐藏Toast图标：

toast("操作成功", {
  icon: null  // 这会完全隐藏图标
})

技术实现细节

1. 属性处理优化：Sonner现在能够正确处理null值作为icon属性的情况，完全移除图标元素而不仅仅是隐藏它。

2. 布局调整：当图标被移除时，组件会自动调整剩余内容的间距，确保文本和其他元素保持正确的对齐和边距。

3. 向后兼容：这一改动保持了与现有代码的兼容性，不会影响已经使用icon属性显示自定义图标的实现。

使用建议

• 当需要极简风格的Toast通知时，使用icon: null可以创建无图标的通知
• 对于需要自定义图标的情况，仍然可以传递React元素作为icon属性的值
• 这一特性特别适合需要与现有设计系统保持一致的场景

这一改进使得Sonner组件在视觉定制方面更加灵活，能够满足更多样化的UI需求。