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.

npm install three @react-three/fiber

npm install react-3d-icons

How to use

Import the Icon element:

import { Icon } from "react-3d-icons";

Import icon(s) you would like to use (full list below):

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.

<Icon file={twitter} color={"#1DA1F2"} scale={10} style={{ height: "100px", width: "100px" }} />

<div style={{ height: "150px", width: "150px" }}>
  <Icon file={github} color={'#1c1c1c'} scale={10}/>
</div>

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.

<Icon file={npm} link='https://www.npmjs.com/package/react-3d-icons' />

Icons

The npm package comes pre-configured with the entire 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)

import { twitter } from "react-3d-icons";

<Icon file='mylogo' />;

Additionally, you can import your own SVGs, and pass references to them into the ‘file’ property.

React Example:

import { mylogo } from "./icons/logo.svg";

<Icon file='mylogo' />;

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 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

Issues

This is a very new project, so obviously it is not perfect yet. If you have issues or feature requests you can email me at logan@beebl.es and I will do my best to help you.

GitHub

View Github