This package is yet another React component library for bytesize-icons. bytesize-icons is a SVG based, nice and reasonable icon set.
$ npm install --save react-component-bytesize-icons react react-dom
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> );
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.
||Name of icon (required).||N/A|
||Line thickness (optional).||
||Size of icon (optional).||
thickness takes one of
size takes one of
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.
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
It means that user must calculate icons' stroke width by its size and thickness.
react-component-bytesize-icons calculates the best
thickness prop and
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.
This package depends on no package.
# Install development dependencies $ npm install # Generate index.tsx and compile it $ npm run gen # Check code style $ npm run lint # Run tests $ npm test