how to scale (large) font-awesome icons from the react-icons package - reactjs

Question

I am using the marvelouse react-icons package (http://gorangajic.github.io/react-icons/fa.html), specifically the font awesome package.
If this was not react, then I would just add an attribute to the tag, such as:
<i class="fa fa-camera-retro fa-5x"></i>
However, if I add the fa-5x to the FaFolderOpen tag, it does not do anything. As you can see, I am using react-bootstrap, and placing the icon a button (should it be a block)?
I have to believe this has been asked before, but I did not find it via search.
Here is what it looks like, and I want it larger:
const React = require('react')
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'
<Button type="button" bsStyle="success" block onClick={(e) => folderChooser(e)}>
<FaFolderOpen />
</Button>

Answer 1

if you want a 5x icon size you need to pass it to the react class as size
// Font awesome pixel sizes relative to the multiplier.
// 1x - 14px
// 2x - 28px
// 3x - 42px
// 4x - 56px
// 5x - 70px
<FaFolderOpen size={70} />
if you notice it jumps by 14 each time
from the github readme it shows everything is overridden inline. its rendering a svg so you cant use 5x you have to use a pixel size
Edit
Coming back to this a few years later, with newer versions of FontAwesome/ReactIcons the recommended way to handle different sizings is with their icon provider that utilizes the React Context API. This requires React v16.3+
import { IconContext } from "react-icons";
<IconContext.Provider value={{ className: "shared-class", size: 70 }}>
<>
<FaFolder />
<FaBeer />
</>
</IconContext.Provider>

Answer 2

In reactjs you can use size = 'with your preferred size which be from sm to lg or 1x to 10x'
this is example for font awesome 5 in react
<FontAwesomeIcon icon={faBars} size = '10x'/>

Answer 3

If you need to style several icons simultaneously, you can wrap them to IconContext.Provider.
<IconContext.Provider value={{color: 'navy', size: 42}}>
<FaFacebook />
<FaGithub />
<FaLinkedin />
</IconContext.Provider>

Answer 4

An approach that is not very explicitly comes from docs (close to #Raimo Haikari):
App.jsx
import {IconContext} from "react-icons";
import { FaBeer } from 'react-icons/fa';
import './App.css'
class App extends component {
return (
<div>
<IconContext.Provider value={{ className="myReact-icons"}}>
<FaBeer />
</IconContext.Provider>
</div>);
}
App.css
.myreact-icons {
color: red;
height: 2em;
}

Answer 5

The default size is 1em. You can change it like this:
import { FcSurvey } from 'react-icons/fc';
<FcSurvey size={'2em'} />

Answer 6

Just to complement, because I was able to do it differently, you can also use the CSS property font-size or fontSize in JSON notation.
Using CSS in external file :
/* style.css */
.bigIcon {
font-size: 25px;
}
// index.jsx
import { FiPackage } from 'react-icons/fi';
import './style.css';
(...)
<FiPackage className="bigIcon" />
or (JSON syntax)
// index.jsx
import { FiPackage } from 'react-icons/fi';
(...)
<FiPackage style={{fontSize:'25px'}} />

Answer 7

I have a designer giving me pixel sizes that don't always correspond to one of FontAwesome's size options. So I'm setting the CSS height.
<FontAwesomeIcon icon={faBars} style={{ height: "20px" }} />

Answer 8

React-Icons has a prop called size that can be used to set to any size you want.
after importing the react-icon from the react-icon library, you can easily do something like this.
<FaUsers size={'4rem'} />

Answer 9

You can use this:
<FaFolderOpen size="4x" />