Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/teaguestockwell/react-icon-cloud
React component for rendering an interactive img or word cloud on canvas
https://github.com/teaguestockwell/react-icon-cloud
canvas npm simple-icons tagcanvas tagcloud wordcl
Last synced: 6 days ago
JSON representation
React component for rendering an interactive img or word cloud on canvas
- Host: GitHub
- URL: https://github.com/teaguestockwell/react-icon-cloud
- Owner: teaguestockwell
- License: mit
- Created: 2021-08-30T00:46:54.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-12-28T21:38:58.000Z (13 days ago)
- Last Synced: 2024-12-29T16:15:10.294Z (13 days ago)
- Topics: canvas, npm, simple-icons, tagcanvas, tagcloud, wordcl
- Language: TypeScript
- Homepage:
- Size: 3.44 MB
- Stars: 73
- Watchers: 2
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![license-shield]][license-url] [![linkedin-shield]][linkedin-url] ![size-url] ![size-url2] [![npm-v]][npm-url] [![gh-shield]][gh-url]
[license-shield]: https://img.shields.io/github/license/teaguestockwell/react-icon-cloud.svg
[license-url]: https://github.com/teaguestockwell/react-icon-cloud/blob/master/LICENSE
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/teague-stockwell/
[size-url]: https://img.shields.io/bundlephobia/minzip/react-icon-cloud
[size-url2]: https://img.shields.io/bundlephobia/min/react-icon-cloud
[npm-v]: https://img.shields.io/npm/v/react-icon-cloud
[npm-url]: https://www.npmjs.com/package/react-icon-cloud
[gh-shield]: https://img.shields.io/badge/-GitHub-black.svg?logo=github&colorB=555
[gh-url]: https://github.com/teaguestockwell/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](https://github.com/simple-icons/simple-icons) with custom fallback color for poor contrast
- Lazy animation of the canvas (pause animation when off screen)
## Getting Started
To get a local copy up and running follow these simple steps or see the [Code Sandbox](https://codesandbox.io/s/react-icon-cloud-1xr9h).
```sh
npm i react-icon-cloud
```
## Static icon slugs
```tsx
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
{icons}
hello world
}
```
## Dynamic icon slugs
```tsx
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 Loading
}
const slugs = [
'amazonaws',
'android',
'androidstudio',
'antdesign',
'typescript',
'vercel',
'visualstudiocode'
]
const DynamicIconCloud = () => {
const icons = useIcons(slugs)
return
{icons}
}
```
# 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 build 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](https://www.goat1000.com/tagcanvas-options.php)
[Code Sandbox](https://codesandbox.io/s/react-icon-cloud-d0s96s)
[Dynamically Import Icons With Next.js SSR](https://github.com/teaguestockwell/portfolio-v2-nextjs/blob/main/src/components/skill_cloud.tsx)
## Roadmap
See the [open issues](https://github.com/tsappdevelopment/react-icon-cloud/issues) for a list of proposed features (and known issues).
## Built With
- [TSdx](https://github.com/formium/tsdx)
- [TypeScript](https://www.typescriptlang.org)
- [TagCanvas](https://www.goat1000.com/tagcanvas.php)
- [Simple Icons](https://github.com/simple-icons/simple-icons)
## License
See `LICENSE` for more information.
## Contact
Teague Stockwell - [LinkedIn](https://www.linkedin.com/in/teague-stockwell)