[Icon] Internal React error: Expected static flag was missing

[ptgamr]

Environment

• Package version(s): 5.0.0
• Operating System: All
• Browser name and version: All

Code Sandbox

N/A

Steps to reproduce

Render an Icon component

Actual behavior

Expected behavior

That error / warning should not be appearing, it doesn't break anything, but having the error during development is quite annoying

Possible solution

Looks like the icon component has a conditional return before usage of hooks. And it is not recommended, as per hook rules, or this comment facebook/react#24391 (comment)

I think the part after the return can be extracted to a private component, something like:

export const Icon: React.FC<IconProps> = React.forwardRef<any, IconProps>((props, ref) => {
    const { icon } = props;
    if (icon == null || typeof icon === "boolean") {
        return null;
    } else if (typeof icon !== "string") {
        return icon;
    }
    
    return <IconInner {...props} />
}

// and then the rest of the code can go into the `<IconInner>`

[ptgamr]

Thanks @fellmann @adidahiya