react-icon-cloud

React Icon Cloud

React component for rendering an interactive img or word cloud on canvas
Code Sandbox Report Bug

About

An interactive 3D tag cloud component for React that renders text and images into a interactive 3D tag cloud

• Built in support for rendering a cloud of Simple Icons with custom fallback color for poor contrast

• Lazy animation of the canvas (pause animation when off screen)

Built With

• TSdx
• TypeScript
• TagCanvas
• Simple Icons

Getting Started

To get a local copy up and running follow these simple steps.

npm i react-icon-cloud

import {IconTag, Cloud, IconCloud, Tag, TagCanvasOptions } from 'react-icon-cloud'

Then use either of the components:

  <Cloud type={'word'} tags={tags1} tagCanvasOptions={options1}/>

  <IconCloud minContrastRatio={1} iconSize={50} backgroundHexColor={'#fff'} fallbackHexColor={'#000'} tags={tags3} tagCanvasOptions={options1}/>

Examples

Tag Canvas Options

Code Sandbox

Dynamically Import Icons With Next.js SSR

Roadmap

See the open issues for a list of proposed features (and known issues).

License

See LICENSE for more information.

Contact

Teague Stockwell - LinkedIn