@jouwomgeving/ui-icon

$ npm install @jouwomgeving/ui-icon

FontAwesome

We use version 4.6.3 of FontAwesome in this project.

Usage

import Trash from '@jouwomgeving/ui-icon/FontAwesome/Trash';
import * as Button from '@jouwomgeving/ui-form';

function IconButton() {
  return (
    <Button.default
      icon={
        <Trash size={12}/>
      }
      content="Verwijderen"
    />
  );
}

export default IconButton;

Naming

You can find all the icons at http://fontawesome.io/icons/. The names are all uppercased and prefix with Fa, as an example bar-chart will be FaBarChart.

Properties

|Props|Values|Default|Required| |---|---|---|---| | Size | 9, 12, 14, 18, 24 | 14 | Yes | | Color | string | #fff | No |

Updating

To update the current version of FontAwesome;

1. $ nvm use && npm install
2. Go to (IcoMoon)https://icomoon.io/app/#/select
3. Select only the FontAwesome library
4. Drop the FontAwesome svg icons in ui-icon/FontAwesome/assets/icons
5. Run $ npm run generate:fontawesome
6. You got a fully updated Icon set

SmashIcon

The SmashIcons will be a selected set of svg images / icons, curated by the designers.
The icons will be optimized when generating react components.

Usage

import { SmashIcon } from '@jouwomgeving/ui-icon/FontAwesome/Trash';

function Layout() {
  return (
    <SmashIcon.Mailbox size={52}/>
  );
}

export default Layout;

Properties

|Props|Values|Default|Required| |---|---|---|---| | Size | 52 || Yes |