draftbit / re-font-awesome

ReasonML bindings to Font Awesome Pro

Font Awesome in Rescript

Usage

// Free libraries
<FontAwesome.Icon icon=FontAwesome.FreeRegular.faCheck />
<FontAwesome.Icon icon=FontAwesome.FreeSolid.faXRay className="MyIcon" />

// Pro libraries (requires a font-awesome token, see below)
<FontAwesome.Icon
  icon=FontAwesome.Duotone.faBanjo
  className="PrimaryIcon"
/>

<FontAwesome.Icon icon=FontAwesome.Light.faHockeyPuck />

Installation & dependencies

This library uses optional dependencies for the individual font libraries, so make sure you include the ones you want to use in your project. For example:

$ yarn add '@fortawesome/pro-regular-svg-icons@^5'
$ yarn add '@fortawesome/free-solid-svg-icons@^5'

NOTE: In order to use the -pro libraries you must have a token for font awesome in your .npmrc. As an example:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX

Generate the binding files

The reason bindings for each font style are generated by a script genbindings.js, which you can run directly or with:

yarn gen-icon-bindings

This should be run any time the FontAwesome version changes, to keep the list of icons up to date.

Preview Example

A small React application is provided to preview the icons and serve as an example of how to use the components. Its code lives in the example directory. It can be run with yarn example:start and will be run on port 1234 by default.

Compiler Commands

yarn re:clean
yarn re:build
yarn re:watch

re-font-awesome's Issues

Different behavior in Reason vs Rescript

Looks like using this lib in a rescript project vs a reason project has to be handled differently. reproduction here.

In rescript you have to wrap the lib in a @react.element like so:

https://github.com/idkjs/drafbit-re-font-awesome-reproduction/blob/05a39b2e226bcf1bad9432b18a558c86a3f2d7df/src/Icon.res#L1-L2

@module("@fortawesome/react-fontawesome") @react.component
external make: (~icon: FontAwesome.IconObject.t, ~className: string=?) => React.element = "FontAwesomeIcon"

then

  <div style>
    <Icon icon=FontAwesome.FreeRegular.faClock />
    children
    <Icon icon=FontAwesome.FreeSolid.faXRay className="MyIcon" />
  </div>

Whereas with reason, work as indicated in docs

https://github.com/idkjs/drafbit-re-font-awesome-reproduction/blob/54811d041885bf966f2b1c914669ae23a7a83ae2/src/BlinkingGreeting/BlinkingGreeting.re#L24-L28

  <div style>
    <FontAwesome.Icon icon=FontAwesome.FreeRegular.faClock />
    children
    <FontAwesome.Icon icon=FontAwesome.FreeSolid.faXRay className="MyIcon" />
  </div>;

In a mixed reasonml/rescript project you have to use the rescript hacked version in your reason files:

  <div style>
    <Icon icon=FontAwesome.FreeRegular.faClock />
    children
    <Icon icon=FontAwesome.FreeSolid.faXRay className="MyIcon" />
  </div>

Just an FYI, folks.

Also seem to have had to install with -legacy-peer-deps.