Lo que me gustaría hacer pero no es posible es algo como esto:
import { FaBook } from 'react-icons/fa'; const Parent = () => <Child icon={FaBook}>Save</Child>;Luego en el niño
const Child = ({ icon }) => ( <div> <Icon as={icon} size={20} /> <Icon as={icon} size={30} /> </div> ); Esto es para que no tenga que pasar un iconSmall e iconLarge separado, el tamaño es el único diferenciador. ¿Existe una forma de reacción en la que pueda agregar la propiedad de size en el niño?
Cualquiera que sea el componente Icon. ¿Algo como esto?
Padre.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;Niño.js
import React from 'react'; const Child = ({icon}) => ( <div> {icon({size: 20})} {icon({size: 30})} </div> ); export default Child;