https://github.com/beebls/react-3d-icons
3d, Animated, Drag-and-Drop icons for React
https://github.com/beebls/react-3d-icons
3d 3d-icon icon-components icon-library icon-pack icons react react-component-library react-three-fiber reactjs threejs
Last synced: about 2 months ago
JSON representation
3d, Animated, Drag-and-Drop icons for React
- Host: GitHub
- URL: https://github.com/beebls/react-3d-icons
- Owner: beebls
- License: mit
- Created: 2022-05-08T02:02:03.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-10T19:41:30.000Z (3 months ago)
- Last Synced: 2025-03-10T20:35:15.781Z (3 months ago)
- Topics: 3d, 3d-icon, icon-components, icon-library, icon-pack, icons, react, react-component-library, react-three-fiber, reactjs, threejs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-3d-icons
- Size: 3.87 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# react-3d-icons
A simple and easy-to-use library for adding 3d icons into any React project.
## Example
The library provides thousands of icons ready to go, and can be extended with any SVG you want.
## Installation
ThreeJS and React Three Fiber are expected to already be installed in the project.
```sh
npm install three @react-three/fiber
npm install react-3d-icons
```
## How to use
Import the Icon element:
```javascript
import { Icon } from "react-3d-icons";
```
Import icon(s) you would like to use (full list below):
```javascript
import { twitter, github } from "react-3d-icons";
```
Add the Icon element and specify your icon as well as any other parameters.
If size is unspecified, the icon's canvas will fill the size of its parent.
```javascript
```
Voila! Your icon is now display and can be treated as any other image or text element.
## Opening Links
You can pass any url into the 'link' property of the Icon element, and clicking on the icon will open that link in a new tab.
```javascript
```
## Icons
The npm package comes pre-configured with the entire [simpleicons.org](https://simpleicons.org/) catalogue.
The import names are lowercase, without spaces, and numbers & periods have been converted to words.
(Ex: Twitter -> twitter, Google Maps -> googlemaps, About.me -> aboutdotme, 1Password -> onepassword)
```javascript
import { twitter } from "react-3d-icons";
;
```
Additionally, you can import your own SVGs, and pass references to them into the 'file' property.
React Example:
```javascript
import { mylogo } from "./icons/logo.svg";
;
```
## Customization
The Icon component comes with properties which you can customize to change how your icon looks and behaves.
| Property | Description | Type | Default Value | Required? |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------------- | --------- |
| file | The SVG you want to use in your icon. | string | _undefined_ | ✅ |
| style | The CSS styles that will applied to the container of the element. | object | {} | |
| className | The CSS classes that will be applied to the container of the element. | string | '' | |
| color | The color of your icon. | string ('#ff1965') or hexadecimal number (0xff1965) | #000000 | |
| lightColor | The color of the light illuminating your icon. | string ('#ff1965') or hexadecimal number (0xff1965) | #ffffff | |
| depth | The depth of the extrusion of your icon. | number | 0.5 | |
| extrudeSettings | Custom ThreeJS extrusion settings you can apply if you want more control than just depth. See [ThreeJS Docs](https://threejs.org/docs/index.html?q=extru#api/en/geometries/ExtrudeGeometry) for more info | object | _undefined_ | |
| scale | The scale of your icon, some may initially be too small or large. | number | 1 | |
| position | An array of the X, Y, and Z positions of your icon in 3d space. | array | [0, 0, 0] | |
| rotation | An array of the X, Y, and Z rotation of your icon. Unlike ThreeJS, which uses radian rotation, this uses "normal" degree rotation (Ex: 360 degrees is a full turn) | array | [0, 0, 0] | |
| spin | Set to true to make your icon spin in a circle, or set it to a number and increase or decrease it to change the speed of rotation. | number OR boolean | 0 | |
| link | If specified, the link that will be opened upon clicking on the icon. | string | _undefined_ | |