fa-shorthand.macro
A babel-plugin-macros that provide a shorthand access to Font Awesome using react-fontawesome
TOC
Get Started
This package is for integrating Font Awesome 5 React component using SVG.
Peer Dependency
Ensure you have babel-plugin-macros installed within your project. And the react-fontawesome installed with the icons packages you are using.
$ npm i --save @fortawesome/free-brands-svg-icons$ npm i --save @fortawesome/free-regular-svg-icons
If you are a Font Awesome Pro subscriber you can install Pro packages.
$ npm i --save @fortawesome/pro-solid-svg-icons$ npm i --save @fortawesome/pro-regular-svg-icons$ npm i --save @fortawesome/pro-light-svg-icons$ npm i --save @fortawesome/pro-duotone-svg-icons
Usage
You can use Font Awesome icons in your React components as simply as this:
<Icon icon=IconregularFreecheck size="xs"/><Icon icon=IconbrandsbuyNLarge/>
<Icon icon=Icondoutonecoffee size="6x"/>
Features
Layers
<IconsLayers> <Icon icon=IconregularFreesquare color="green" /> <Icon icon=IconregularFreecheck inverse transform="shrink-6" /></IconsLayers>
Stack
A size
prop is needed for IconsStack
and Icon
children. [default 1x]
Icon
child with no size
prop will inherit the IconsStack
size or default to 1x
; <IconsStack size="2x"> <Icon size="1x" icon=IconregularFreesquare color="green" /> <Icon size="2x" icon=IconregularFreecheck inverse transform="shrink-6" /></IconsStack>
<IconsStack />
prop | type | default |
---|---|---|
size |
string/number |
1x |
Under The Hood
Basic
<Icon icon=IconregularFreecoffee/>
the code block above will generate the following results
<FontAwesomeIcon icon=farCoffee />
Layers
<IconsLayers> <FontAwesomeIcon icon=IconregularFreesquare color="green" /> <FontAwesomeIcon icon=IconregularFreecheck inverse transform="shrink-6" /></IconsLayers>
the code block above will generate the following results
<span className="fa-layers fa-fw"> <FontAwesomeIcon icon=farSquare color="green" /> <FontAwesomeIcon icon=farCheck inverse transform="shrink-6" /></span>
Stack
<IconsStack> <FontAwesomeIcon icon=IconregularFreesquare color="green" /> <FontAwesomeIcon icon=IconregularFreecheck inverse transform="shrink-6" /></IconsStack>
the code block above will generate the following results
<span className="fa-stack fa-stack-1x"> <FontAwesomeIcon className="fa-stack-1x" icon=farSquare color="green" /> <FontAwesomeIcon className="fa-stack-1x" icon=farCheck inverse transform="shrink-6" /></span>