how to style motion icon in styled-component in React - reactjs

Question

Is it possible to style motion(framer-motion) icon in styled-components in React.
Here is my style.js file:
import { motion } from "framer-motion";
import { FaRegMoon } from "react-icons/fa";
export const MoonStyled = styled(motion.FaRegMoon)`
width: max-content;
height: max-content;
font-size: 40px;
`;
Here is my jsx file:
import { SunStyled } from "./styles/styles";
<SunStyled/>
I tried making it <motion.SunStyled/> but it doesn't work.
Is there anyway to get it worked?

Answer 1

Here is where the docs talk about this: https://www.framer.com/docs/component/#custom-components
This is the helpful statement that details how to forward a ref / make a custom component wrappable by motion:
const Component = React.forwardRef((props, ref) => (
<div ref={ref} />
))
const MotionComponent = motion(Component)
The icon component doesn't forward the ref to the actual dom svg, so that is why it is not wrappable by motion.
return (
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
{...conf.attr}
{...attr}
{...svgProps}
className={className}
style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
height={computedSize}
width={computedSize}
xmlns="http://www.w3.org/2000/svg"
>
{title && <title>{title}</title>}
{props.children}
</svg>
)
Even though they are spreading the props ref is the only prop that is not automatically passed.
source link
I wanted to test this on my own, so I made this example. It doesn't work for the above reason but feel free to see for yourself.
https://codesandbox.io/s/framer-motion-with-react-icons-rhqu6?file=/src/index.js