react-icons set size prop of Icon in child

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?

What is the Icon component? – Tushar Shahi Jul 18 '22 at 09:53 — Tushar Shahi, Jul 18 '22 at 09:53

score 0 · Answer 1 · answered Jul 18 '22 at 10:04

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;

react-icons set size prop of Icon in child

1 Answers1