react-icon-cloud v4.1.4
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
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
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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago