Ta-react-iconflood NPM

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.

react component visualisation infographic icons

react ta-semantic-ui

1.1.0

8 years ago

1.0.0

8 years ago