React Compoent for bytesize-icons

This package is yet another React component library for bytesize-icons. bytesize-icons is a SVG based, nice and reasonable icon set.

Installation

$ npm install --save react-component-bytesize-icons react react-dom

Usage

import * as React from 'react';
import Icon from 'react-component-bytesize-icons';

const Message = (props) => (
    <div>
        Search icon: <Icon name="search"/>
        Thin large icon: <Icon name="book" thickness="thin" size="larger"/>
        Thick small icon: <Icon name="flag" thickness="bold" size="small"/>
    </div>
);

The name property is corresponding to described icons in [bytesize-icons repo's README][]. You can also see the bottom section of this README to know all available icons.

Properties of <Icon/> Component

| Property | Description | Default | |---------------|----------------------------|-----------| | name | Name of icon (required). | N/A | | thickness | Line thickness (optional). | regular | | size | Size of icon (optional). | regular |

thickness takes one of ultra-light, thin, light, regular, medium, bold or heavy.

size takes one of small, regular, larger or largest. small is 24px, regular is 32px, larger is 48px and largest is 64px. With these size, icons are rendered the best. You should choose one from them and tweak the size with CSS.

You can also see type definition file for more detail.

Difference From react-bytesize-icons

There is already a React component package for bytesize-icons but I created this for the below points

Easy to tweak icon size and weight

react-bytesize-icons directly shows <svg> element's props such as height or strokeWidth. It means that user must calculate icons' stroke width by its size and thickness. react-component-bytesize-icons calculates the best strokeWidth, height and width attributes of <svg> from thickness prop and size prop.

Maintenancability

I didn't directly write index.tsx. It's generated with Ruby script. It generates TypeScript code by referring bytesize-icons repository directly.

Well tested

This package is checked at 3 stages.

• Style check with tslint
• Type check on compilation from TypeScript (with strict null checks)
• Unit tests for ALL icons with enzyme and mocha

Of course you can use this package in safe way using TypeScript because this package contains its type definitions. Type definitions are also tested.

No dependency

This package depends on no package.

All Icons

| Icon | React Component | |------|-----------------| | | <Icon name="activity"/> | | | <Icon name="alert"/> | | | <Icon name="archive"/> | | | <Icon name="arrow-bottom"/> | | | <Icon name="arrow-left"/> | | | <Icon name="arrow-right"/> | | | <Icon name="arrow-top"/> | | | <Icon name="backwards"/> | | | <Icon name="bag"/> | | | <Icon name="ban"/> | | | <Icon name="bell"/> | | | <Icon name="book"/> | | | <Icon name="bookmark"/> | | | <Icon name="calendar"/> | | | <Icon name="camera"/> | | | <Icon name="caret-bottom"/> | | | <Icon name="caret-left"/> | | | <Icon name="caret-right"/> | | | <Icon name="caret-top"/> | | | <Icon name="cart"/> | | | <Icon name="checkmark"/> | | | <Icon name="chevron-bottom"/> | | | <Icon name="chevron-left"/> | | | <Icon name="chevron-right"/> | | | <Icon name="chevron-top"/> | | | <Icon name="clipboard"/> | | | <Icon name="clock"/> | | | <Icon name="close"/> | | | <Icon name="code"/> | | | <Icon name="compose"/> | | | <Icon name="creditcard"/> | | | <Icon name="desktop"/> | | | <Icon name="download"/> | | | <Icon name="edit"/> | | | <Icon name="eject"/> | | | <Icon name="ellipsis-horizontal"/> | | | <Icon name="ellipsis-vertical"/> | | | <Icon name="end"/> | | | <Icon name="export"/> | | | <Icon name="external"/> | | | <Icon name="eye"/> | | | <Icon name="feed"/> | | | <Icon name="file"/> | | | <Icon name="filter"/> | | | <Icon name="flag"/> | | | <Icon name="folder-open"/> | | | <Icon name="folder"/> | | | <Icon name="forwards"/> | | | <Icon name="fullscreen-exit"/> | | | <Icon name="fullscreen"/> | | | <Icon name="gift"/> | | | <Icon name="github"/> | | | <Icon name="heart"/> | | | <Icon name="home"/> | | | <Icon name="import"/> | | | <Icon name="inbox"/> | | | <Icon name="info"/> | | | <Icon name="lightning"/> | | | <Icon name="link"/> | | | <Icon name="location"/> | | | <Icon name="lock"/> | | | <Icon name="mail"/> | | | <Icon name="menu"/> | | | <Icon name="msg"/> | | | <Icon name="microphone"/> | | | <Icon name="minus"/> | | | <Icon name="mobile"/> | | | <Icon name="moon"/> | | | <Icon name="move"/> | | | <Icon name="music"/> | | | <Icon name="mute"/> | | | <Icon name="options"/> | | | <Icon name="paperclip"/> | | | <Icon name="pause"/> | | | <Icon name="photo"/> | | | <Icon name="play"/> | | | <Icon name="plus"/> | | | <Icon name="portfolio"/> | | | <Icon name="print"/> | | | <Icon name="reload"/> | | | <Icon name="reply"/> | | | <Icon name="search"/> | | | <Icon name="send"/> | | | <Icon name="settings"/> | | | <Icon name="sign-in"/> | | | <Icon name="sign-out"/> | | | <Icon name="star"/> | | | <Icon name="start"/> | | | <Icon name="tag"/> | | | <Icon name="telephone"/> | | | <Icon name="trash"/> | | | <Icon name="twitter"/> | | | <Icon name="unlock"/> | | | <Icon name="upload"/> | | | <Icon name="user"/> | | | <Icon name="video"/> | | | <Icon name="volume"/> | | | <Icon name="work"/> | | | <Icon name="zoom-in"/> | | | <Icon name="zoom-out"/> | | | <Icon name="zoom-reset"/> |

Development

# Install development dependencies
$ npm install

# Generate index.tsx and compile it
$ npm run gen

# Check code style
$ npm run lint

# Run tests
$ npm test