@jouwomgeving/ui-icon

Dictator package JO ui icon

Stats

StarsIssuesVersionUpdatedCreatedSize
@jouwomgeving/ui-icon
1.1.7a year ago5 years agoMinified + gzip package size for @jouwomgeving/ui-icon in KB

Readme

Icons

$ 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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.