DaisyUI组件库中Drawer组件的JSX属性修复

在DaisyUI组件库的Drawer组件文档中，发现了一个关于JSX属性的常见问题。开发者在实现响应式导航菜单时，可能会遇到SVG图标属性使用不规范的情况。

问题背景

Drawer组件是DaisyUI中用于创建侧边栏导航的重要组件，特别适合实现响应式布局。在移动端和桌面端切换时，通常需要配合SVG图标来实现菜单的展开/收起功能。

技术细节

在React/JSX环境中，SVG元素的类名属性应该使用className而非class。这是因为：

1. JSX是JavaScript的语法扩展，而class在JavaScript中是保留关键字
2. React团队为了保持一致性，采用了className作为类名属性
3. 直接使用class会导致编译错误或运行时警告

修复方案

DaisyUI团队已经及时修复了文档中的这个问题。开发者在使用Drawer组件时，应该按照以下规范编写SVG图标：

<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" ... />
</svg>

而不是：

<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" ... />
</svg>

最佳实践

1. 在使用DaisyUI组件时，注意区分HTML和JSX的语法差异
2. 对于React项目，所有类名都应使用className
3. 定期检查组件库文档更新，获取最新的使用示例
4. 使用TypeScript可以提前捕获这类属性错误

这个修复体现了DaisyUI团队对细节的关注，也提醒开发者在不同技术栈中要注意语法的微妙差异。