ta-react-iconflood

Icon Flood Component

React component that quickly shows a row of icons. Usually used for visualisations to allow comparing the amount of things.

Demo 1, Demo 2

Installation

yarn add ta-react-iconflood

Usage

import IconFlood from 'ta-react-iconflood';
let image = require('./path/to/image.png');

/*
    ... more stuff here
 */

class YourComponent extends React.Component {
  render() {

    return (
      <div>
        Just icons:
        <IconFlood count={10} />
        
        With images:
        <IconFlood count={5} imageSrc={image} size='mini' />
      </div>
    )
  }
}

API – 1.1.0

The component uses Semantic UI icons to draw the icons. The icon, color and size properties map to the corresponding Semantic UI classes.

Props

Property	Type	Required	Default	Description
count	number	yes	100	The amount of icons to show.
icon	string	no	user	The icon to display.
color	string	no	grey	The color of the icons, uses standard Semantic UI colours.
size	string	no	large	The size of the icons. Use 'mini' or 'tiny' when you use images, otherwise they will be too large.
inline	bool	no	false	If true, puts the icons in a <span> element instead of a <div>. This allows for the composition of several icon types in one block.
imageSrc	string	no	N/A	Use an URL to an image instead of icons.
additionalClasses	string	no	N/A	Additional classes to be passed to the icons – as space delimited strings, just as in normal HTML.