react-icons 设置子图标的大小道具

Question

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?

Answer 1

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;