ficon v0.3.0

Table of Contents

• Installation
  • Yarn
  • NPM
• Examples
  • react
  • react-fela
  • react-styled-components
  • more
• FontAwesome Pro

Install

Yarn

# For regular+brands icons
yarn add ficon
# For solid+brands icons
yarn add ficon-solid

NPM

# For regular+brands icons
npm i ficon
# For solid+brands icons
npm i ficon-solid

Examples

react

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>
);

react-fela

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>
);

react-styled-components

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>
);

more

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!

FontAwesome Pro

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