Yet another React component library for bytesize-icons
TypeScript Ruby
Latest commit 3125ce7 Dec 12, 2016 @rhysd 2.0.1
Permalink
Failed to load latest commit information.
scripts
test-dts
test
.gitignore
.travis.yml
LICENSE
README.md
index.d.ts
index.tsx
package.json
tsconfig.json
tslint.json

README.md

React Compoent for bytesize-icons

Build Status

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
activity icon <Icon name="activity"/>
alert icon <Icon name="alert"/>
archive icon <Icon name="archive"/>
arrow-bottom icon <Icon name="arrow-bottom"/>
arrow-left icon <Icon name="arrow-left"/>
arrow-right icon <Icon name="arrow-right"/>
arrow-top icon <Icon name="arrow-top"/>
backwards icon <Icon name="backwards"/>
ban icon <Icon name="ban"/>
bell icon <Icon name="bell"/>
book icon <Icon name="book"/>
bookmark icon <Icon name="bookmark"/>
calendar icon <Icon name="calendar"/>
camera icon <Icon name="camera"/>
caret-bottom icon <Icon name="caret-bottom"/>
caret-left icon <Icon name="caret-left"/>
caret-right icon <Icon name="caret-right"/>
caret-top icon <Icon name="caret-top"/>
cart icon <Icon name="cart"/>
checkmark icon <Icon name="checkmark"/>
chevron-bottom icon <Icon name="chevron-bottom"/>
chevron-left icon <Icon name="chevron-left"/>
chevron-right icon <Icon name="chevron-right"/>
chevron-top icon <Icon name="chevron-top"/>
clock icon <Icon name="clock"/>
close icon <Icon name="close"/>
code icon <Icon name="code"/>
compose icon <Icon name="compose"/>
creditcard icon <Icon name="creditcard"/>
download icon <Icon name="download"/>
edit icon <Icon name="edit"/>
eject icon <Icon name="eject"/>
ellipsis-horizontal icon <Icon name="ellipsis-horizontal"/>
ellipsis-vertical icon <Icon name="ellipsis-vertical"/>
end icon <Icon name="end"/>
export icon <Icon name="export"/>
external icon <Icon name="external"/>
eye icon <Icon name="eye"/>
file icon <Icon name="file"/>
fire icon <Icon name="fire"/>
flag icon <Icon name="flag"/>
folder-open icon <Icon name="folder-open"/>
folder icon <Icon name="folder"/>
forwards icon <Icon name="forwards"/>
gift icon <Icon name="gift"/>
github icon <Icon name="github"/>
heart icon <Icon name="heart"/>
home icon <Icon name="home"/>
import icon <Icon name="import"/>
inbox icon <Icon name="inbox"/>
info icon <Icon name="info"/>
lightning icon <Icon name="lightning"/>
link icon <Icon name="link"/>
location icon <Icon name="location"/>
lock icon <Icon name="lock"/>
mail icon <Icon name="mail"/>
menu icon <Icon name="menu"/>
msg icon <Icon name="msg"/>
minus icon <Icon name="minus"/>
music icon <Icon name="music"/>
mute icon <Icon name="mute"/>
options icon <Icon name="options"/>
paperclip icon <Icon name="paperclip"/>
pause icon <Icon name="pause"/>
photo icon <Icon name="photo"/>
play icon <Icon name="play"/>
plus icon <Icon name="plus"/>
portfolio icon <Icon name="portfolio"/>
print icon <Icon name="print"/>
reload icon <Icon name="reload"/>
reply icon <Icon name="reply"/>
search icon <Icon name="search"/>
send icon <Icon name="send"/>
settings icon <Icon name="settings"/>
star icon <Icon name="star"/>
start icon <Icon name="start"/>
tag icon <Icon name="tag"/>
trash icon <Icon name="trash"/>
twitter icon <Icon name="twitter"/>
unlock icon <Icon name="unlock"/>
upload icon <Icon name="upload"/>
user icon <Icon name="user"/>
video icon <Icon name="video"/>
volume icon <Icon name="volume"/>
work icon <Icon name="work"/>

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