fa-shorthand.macro

A babel-plugin-macros that provide a shorthand access to Font Awesome using react-fontawesome

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>

Support

Bug/Suggestions open an issue on Gitlab or by email

fa-shorthand.macro