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.