What I would like to do but isn't possible is something like this:
import { FaBook } from 'react-icons/fa';
const Parent = () => <Child icon={FaBook}>Save</Child>;
Then in the child
const Child = ({ icon }) => (
<div>
<Icon as={icon} size={20} />
<Icon as={icon} size={30} />
</div>
);
This is so I don't have to pass an iconSmall and iconLarge prop separately the size is the only differentiator. I there a react way I can add the size property on the child?
Whatever the Icon component is. Something like this?
Parent.js
import React from 'react';
import {FaBook} from 'react-icons/fa';
import Child from './Child';
const Parent = () => <Child icon={FaBook}>Save</Child>;
export default Parent;
Child.js
import React from 'react';
const Child = ({icon}) => (
<div>
{icon({size: 20})}
{icon({size: 30})}
</div>
);
export default Child;