# For regular+brands icons
yarn add ficon
# For solid+brands icons
yarn add ficon-solid
# For regular+brands icons
npm i ficon
# For solid+brands icons
npm i ficon-solid
import { FaFontAwesome } from 'ficon';
const MyComponent = () => (
<div>
<span style={{ fontSize: 14 }}>
I can adapt to fontSize! <FaFontAwesome color="black" />
</span>
<span>
I can use any other valid color too! <FaFontAwesome color="red" />I can
use any other valid color too! <FaFontAwesome color="#666" />
</span>
</div>
);Learn more about fela here;
import FiconProvider from 'ficon-fela';
import { FaFontAwesome } from 'ficon';
const MyComponent = () => (
<FiconProvider>
<div>
<span style={{ fontSize: 14 }}>
I can adapt to fontSize! <FaFontAwesome color="black" />
</span>
<span>
I can use your themes color (using theme.color)! <FaFontAwesome color />
</span>
<span>
I can use your any of your themes properties!{' '}
<FaFontAwesome color="secondary" />
</span>
<span>
I can use any other valid color too! <FaFontAwesome color="red" />I can
use any other valid color too! <FaFontAwesome color="#666" />
</span>
</div>
</FiconProvider>
);Learn more about styled-components here.
import FiconProvider from 'ficon-styled-components';
import { FaFontAwesome } from 'ficon';
const MyComponent = () => (
<FiconProvider>
<div>
<span style={{ fontSize: 14 }}>
I can adapt to fontSize! <FaFontAwesome color="black" />
</span>
<span>
I can use your themes color (using theme.color)! <FaFontAwesome color />
</span>
<span>
I can use your any of your themes properties!{' '}
<FaFontAwesome color="secondary" />
</span>
<span>
I can use any other valid color too! <FaFontAwesome color="red" />I can
use any other valid color too! <FaFontAwesome color="#666" />
</span>
</div>
</FiconProvider>
);Ficon could support more styling frameworks like jss, glamor, etc. if you want to contribute! Checkout ficon-fela source to see how easy it is to write a custom provider. Feel free to PR!
If you want to use the pro icons, you will need to publish your own private package. Create a new package with a package.json similar to the following. You can generate either typescript or es6 files. You can use light, brands, solid or regular icons, though you can not use light/regular/solid at the same time. If you do, you will need to generate different packages due to filename conflicts.
{
"version": "0.0.1",
"name": "@myorg/icons",
"description": "",
"scripts": {
// For es6
"build": "yarn clean && ficon pro light,brands es6 && tsc",
// For ts
"build": "yarn clean && ficon pro light,brands ts && tsc"
},
"devDependencies": {
"ficon-generator": "^0.1.3"
}
}If you want to get started really quickly, just use the code found in ficon.
Make sure you got your .npmrc setup to use the fontawesome npm registry. You will find your own package token here.
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR_FA_PACKAGE_TOKEN