fa-shorthand.macro v0.2.0

fa-shorthand.macro

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

TOC

• Get started
  • Peer Dependency
• Usage
  • Features
    • Layers
    • Stack
• Under The Hood
• Support

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 />

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