fa-shorthand.macro
v0.2.0
Published
shorthand for react-fontawesome
Downloads
523
Maintainers
Readme
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:
import { Icon } from 'fa-shorthand.macro'
<Icon icon={Icon.regularFree.check} size="xs"/>
<Icon icon={Icon.brands.buyNLarge}/>
<Icon icon={Icon.doutone.coffee} size="6x"/>
Features
Layers
import { Icon, IconsLayers } from 'fa-shorthand.macro'
<IconsLayers>
<Icon icon={Icon.regularFree.square} color="green" />
<Icon icon={Icon.regularFree.check} 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
import { Icon, IconsStack } from 'fa-shorthand.macro';
<IconsStack size="2x">
<Icon size="1x" icon={Icon.regularFree.square} color="green" />
<Icon size="2x" icon={Icon.regularFree.check} inverse transform="shrink-6" />
</IconsStack>
<IconsStack />
| prop | type | default |
|:----:|:----:|:-------:|
|size
|string/number
| 1x
|
Under The Hood
Basic
<Icon icon={Icon.regularFree.coffee}/>
the code block above will generate the following results
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' // <Icon />
import { faCoffee as farCoffee } from '@fortawesome/free-regular-svg-icons' // Icon.regularFree.coffee
<FontAwesomeIcon icon={farCoffee} />
Layers
<IconsLayers>
<FontAwesomeIcon icon={Icon.regularFree.square} color="green" />
<FontAwesomeIcon icon={Icon.regularFree.check} inverse transform="shrink-6" />
</IconsLayers>
the code block above will generate the following results
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee as farCheck, faSquare as farSquare } from '@fortawesome/free-regular-svg-icons'
<span className="fa-layers fa-fw">
<FontAwesomeIcon icon={farSquare} color="green" />
<FontAwesomeIcon icon={farCheck} inverse transform="shrink-6" />
</span>
Stack
<IconsStack>
<FontAwesomeIcon icon={Icon.regularFree.square} color="green" />
<FontAwesomeIcon icon={Icon.regularFree.check} inverse transform="shrink-6" />
</IconsStack>
the code block above will generate the following results
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee as farCheck, faSquare as farSquare } from '@fortawesome/free-regular-svg-icons'
<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>