{"id":27722600,"url":"https://github.com/beebls/react-3d-icons","last_synced_at":"2025-09-10T01:44:55.751Z","repository":{"id":57688410,"uuid":"489823213","full_name":"beebls/react-3d-icons","owner":"beebls","description":"3d, Animated, Drag-and-Drop icons for React","archived":false,"fork":false,"pushed_at":"2025-03-10T19:41:30.000Z","size":4054,"stargazers_count":6,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T20:35:15.781Z","etag":null,"topics":["3d","3d-icon","icon-components","icon-library","icon-pack","icons","react","react-component-library","react-three-fiber","reactjs","threejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-3d-icons","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beebls.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-08T02:02:03.000Z","updated_at":"2025-03-10T19:41:35.000Z","dependencies_parsed_at":"2023-02-19T13:16:06.021Z","dependency_job_id":null,"html_url":"https://github.com/beebls/react-3d-icons","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beebls%2Freact-3d-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beebls%2Freact-3d-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beebls%2Freact-3d-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beebls%2Freact-3d-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beebls","download_url":"https://codeload.github.com/beebls/react-3d-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251137186,"owners_count":21541682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","3d-icon","icon-components","icon-library","icon-pack","icons","react","react-component-library","react-three-fiber","reactjs","threejs"],"created_at":"2025-04-27T12:27:38.165Z","updated_at":"2025-04-27T12:27:38.754Z","avatar_url":"https://github.com/beebls.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-3d-icons\n\n\u003cdiv align=\"center\" markdown=\"1\"\u003e\n    \u003cimg src=\"https://i.imgur.com/KKT0e2S.png\" width=\"800\"\u003e\u003c/img\u003e\n\u003c/div\u003e\n\nA simple and easy-to-use library for adding 3d icons into any React project.\n\n## Example\n\n![Gif Demonstration](https://i.imgur.com/P6y8rJk.gif)\n\nThe library provides thousands of icons ready to go, and can be extended with any SVG you want.\n\n## Installation\n\nThreeJS and React Three Fiber are expected to already be installed in the project.\n\n```sh\nnpm install three @react-three/fiber\n\nnpm install react-3d-icons\n```\n\n## How to use\n\nImport the Icon element:\n\n```javascript\nimport { Icon } from \"react-3d-icons\";\n```\n\nImport icon(s) you would like to use (full list below):\n\n```javascript\nimport { twitter, github } from \"react-3d-icons\";\n```\n\nAdd the Icon element and specify your icon as well as any other parameters.  \nIf size is unspecified, the icon's canvas will fill the size of its parent.\n\n```javascript\n\u003cIcon file={twitter} color={\"#1DA1F2\"} scale={10} style={{ height: \"100px\", width: \"100px\" }} /\u003e\n\n\u003cdiv style={{ height: \"150px\", width: \"150px\" }}\u003e\n  \u003cIcon file={github} color={'#1c1c1c'} scale={10}/\u003e\n\u003c/div\u003e\n\n```\n\nVoila! Your icon is now display and can be treated as any other image or text element.\n\n![Above example rendered](https://i.imgur.com/mNWWn2P.png)\n\n## Opening Links\n\nYou 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.\n\n```javascript\n\u003cIcon file={npm} link='https://www.npmjs.com/package/react-3d-icons' /\u003e\n```\n\n## Icons\n\nThe npm package comes pre-configured with the entire [simpleicons.org](https://simpleicons.org/) catalogue.  \nThe import names are lowercase, without spaces, and numbers \u0026 periods have been converted to words.  \n(Ex: Twitter -\u003e twitter, Google Maps -\u003e googlemaps, About.me -\u003e aboutdotme, 1Password -\u003e onepassword)\n\n```javascript\nimport { twitter } from \"react-3d-icons\";\n\n\u003cIcon file='mylogo' /\u003e;\n```\n\nAdditionally, you can import your own SVGs, and pass references to them into the 'file' property.\n\nReact Example:\n\n```javascript\nimport { mylogo } from \"./icons/logo.svg\";\n\n\u003cIcon file='mylogo' /\u003e;\n```\n\n## Customization\n\nThe Icon component comes with properties which you can customize to change how your icon looks and behaves.\n\n| Property        | Description                                                                                                                                                                                               | Type                                                | Default Value | Required? |\n| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------------- | --------- |\n| file            | The SVG you want to use in your icon.                                                                                                                                                                     | string                                              | _undefined_   | ✅        |\n| style           | The CSS styles that will applied to the container of the element.                                                                                                                                         | object                                              | {}            |           |\n| className       | The CSS classes that will be applied to the container of the element.                                                                                                                                     | string                                              | ''            |           |\n| color           | The color of your icon.                                                                                                                                                                                   | string ('#ff1965') or hexadecimal number (0xff1965) | #000000       |           |\n| lightColor      | The color of the light illuminating your icon.                                                                                                                                                            | string ('#ff1965') or hexadecimal number (0xff1965) | #ffffff       |           |\n| depth           | The depth of the extrusion of your icon.                                                                                                                                                                  | number                                              | 0.5           |           |\n| 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_   |           |\n| scale           | The scale of your icon, some may initially be too small or large.                                                                                                                                         | number                                              | 1             |           |\n| position        | An array of the X, Y, and Z positions of your icon in 3d space.                                                                                                                                           | array                                               | [0, 0, 0]     |           |\n| 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]     |           |\n| 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             |           |\n| link            | If specified, the link that will be opened upon clicking on the icon.                                                                                                                                     | string                                              | _undefined_   |           |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeebls%2Freact-3d-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeebls%2Freact-3d-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeebls%2Freact-3d-icons/lists"}