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, images, and simple icons 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 or see the Code Sandbox.

npm i react-icon-cloud

Static icon slugs

import React from 'react'
import {Cloud, renderSimpleIcon} from 'react-icon-cloud'
import js from "simple-icons/icons/javascript"
import nextjs from "simple-icons/icons/nextdotjs"

const icons = [js,nextjs].map((icon) => {
  return renderSimpleIcon({
    icon,
    size: 42,
    aProps: {
      onClick: (e: any) => e.preventDefault()
    }
  })
})

const IconCloud = () => {
  return <Cloud>
    {icons}
    <a>
      hello world
    </a>
    <a
      href="https://emojipedia.org/globe-showing-americas/"
      target="_blank"
      rel="noopener"
    >
      <img
        height="42"
        width="42"
        alt="A globe"
        src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/globe-showing-americas_1f30e.png"
      />
    </a>
  </Cloud>
}

Dynamic icon slugs

import React from 'react'
import {Cloud, renderSimpleIcon, fetchSimpleIcons, SimpleIcon} from 'react-icon-cloud'

const useIcons = (slugs: string[]) => {
  const [icons, setIcons] = React.useState()
  React.useEffect(() => {fetchSimpleIcons(slugs).then(setIcons)}, [])

  if (icons) {
    return Object.values(icons.simpleIcons).map((icon) => renderSimpleIcon({
      icon,
      size: 42,
      aProps: {
        onClick: (e: any) => e.preventDefault()
      }
    }))
  }
  
  return <a>Loading</a>
}

const slugs = [
  'amazonaws',
  'android',
  'androidstudio',
  'antdesign',
  'typescript',
  'vercel',
  'visualstudiocode'
]

const DynamicIconCloud = () => {
  const icons = useIcons(slugs)

  return <Cloud>
    {icons}
  </Cloud>
}

Props

Cloud

name	type	default	description
canvasProps	HTMLAttributes < HTMLCanvasElement > | undefined	{}	Attributes that will be passed to the underlying canvas element
children	Tag[]	[]	Tags rendered using the provided renderers
containerProps	HTMLAttributes < HTMLDivElement > | undefined	{}	Attributes passed to the root div element
id	string | number | undefined	uuid	Should be provided when using SSR
options	IOptions | undefined	{}	https://www.goat1000.com/tagcanvas-options.php

renderSimpleIcon

Used to create a tag for the Cloud component

name	type	default	description
aProps	HTMLAttributes < HTMLAnchorElement > | undefined	{}	Attributes passed to the underlying anchor element
bgHex	string | undefined	'#fff'	The string hex of the background the icon will be rendered on. Ex: '#fff'. Used to determine if the min contrast ratio for the icons default color will be met
fallbackHex	string | undefined	'#000'	The color of the icon if the minContrastRatio is not met Ex: '#000'
icon	any	undefined	The simple icon object you would like to render. Ex: import icon from "simple-icons/icons/javascript";
imgProps	HTMLAttributes < HTMLImageElement > | undefined	{}	Attributes passed to the underlying img element
minContrastRatio	number | undefined	1	0 - 21 The min contrast ratio between icon and bgHex before the fallbackHex will be used for the icon color
size	number | undefined	42	The size in px of the icon

fetchSimpleIcons

Used when you cant statically import simple icons during built time. Calling this will use fetch to get icons for each provided slug.

name	type	default	description
slugs	string[]		Slugs to fetch svgs and colors for. The return icons may be passed to renderSimpleIcon

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