使用React Icons时出现dataSlot属性不识别警告，求解决方案

这个警告是因为react-icons的hi2系列组件（比如HiMoon、HiSun）生成SVG元素时，会自动添加dataSlot属性，但React不允许将未识别的属性传递给DOM元素，所以抛出警告。以下是几种可行的解决方法：

方法1：升级react-icons到最新版本 #

官方大概率已经修复了这个属性传递的问题，直接更新依赖即可：

npm update react-icons
# 或者使用yarn
yarn upgrade react-icons

方法2：通过filterProps过滤dataSlot属性 #

如果暂时不想升级依赖，可以利用react-icons提供的filterProps属性，手动移除不需要传递给DOM的dataSlot：
修改图标组件代码如下：

{isMoon ? (
    <HiMoon 
        className="text-[35px] bg-slate-200 text-black p-1 rounded-full cursor-pointer"
        filterProps={{ dataSlot: false }}
    />
) : (
    <HiSun 
        className="text-[35px] bg-slate-200 text-black p-1 rounded-full cursor-pointer"
        filterProps={{ dataSlot: false }}
    />
)}

方法3：手动覆盖dataSlot属性 #

如果filterProps不生效，也可以直接将dataSlot设为undefined，让React忽略这个属性：

{isMoon ? (
    <HiMoon 
        className="text-[35px] bg-slate-200 text-black p-1 rounded-full cursor-pointer"
        dataSlot={undefined}
    />
) : (
    <HiSun 
        className="text-[35px] bg-slate-200 text-black p-1 rounded-full cursor-pointer"
        dataSlot={undefined}
    />
)}

内容的提问来源于stack exchange，提问作者pradip