wrapper for official component, with unofficial component compat
MIT License
Wrapper for official component, with unofficial component compat.
Currently in beta stage.
Since Font-awesome v5 has divided icons into different sets, and renamed many icons, usages with react-fontawesome
package could not be updated to official component
in a simple find-and-replace way. This package is created to ease the migration, wrapping the official component and automatically shimming v4 icon name.
yarn add @skagami/react-fontawesome
or
npm install @skagami/react-fontawesome
Note that you should also install @fortawesome/react-svg-core
and @fortawesome/react-fontawesome
. Due to the API change in FontAwesome 5.1, you should install the version that satisfy the peer dependencies. It seems the official package keeps changing with every pre-release, please report any incompat you meet.
with this package you could simply make a replacement:
- import FA from 'react-fontawesome'
+ import FA from '@skagami/react-fontawesome'
besides, this package provides a shim method based on official v4-shim.js
:
import shim from '@skagami/react-fontawesome/shim'
shim('google-plus') // returns ['fab', 'google-plus-o']
An inject method for react-fontawesome is available so that you don't even need to do the replacement:
import '@skagami/react-fontawesome/inject'
IMPORTANT: same as official component, you'll need to add the icons yourself.
The API is designed to maximize the compat with unofficial react-fontawesome
and provide more semantic usage for new v5 icons. Currently only font-awesome@5's svg format icon is supported.
You don't have to combine icon set and icon name in a array to fill in icon
prop:
- <Icon icon={['fab', 'google-plus-o']} />
+ <Icon fab icon="google-plus-o" />
fas|far|far|fab
and fa
(for explicit v4 icon name usage) Boolean prop is supported.
and name
prop is also supported:
<Icon fab name="google-plus-o" />
The icon version is detected by the following procedure:
v5
. If truthy, it is a v5 icontag
, although tag
will not take effect. If truthy, it is a v4 iconfas
, far
, fal
and fab
is all falsy. If any of them is truthy, it is a v5 iconicon
and name
prop is String
. If none of them is String
, it is a v5 icon (and nothing will show up).icon
. If icon
is truthy and it is not String
, it is a v5 iconV4 icon names will be shimmed to v5's
on mask
prop, if the icon is believe to be v4, and mask
is String
, then the mask icon name will also be shimmed