{"id":13455372,"url":"https://github.com/thiswallz/react-cyber-elements","last_synced_at":"2025-09-23T12:34:08.659Z","repository":{"id":62780288,"uuid":"562078538","full_name":"thiswallz/react-cyber-elements","owner":"thiswallz","description":"Library with cyber punk icons / shapes.","archived":false,"fork":false,"pushed_at":"2022-11-08T13:53:28.000Z","size":815,"stargazers_count":113,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-10T14:21:14.364Z","etag":null,"topics":["components","elements","hud","library","opensource","react"],"latest_commit_sha":null,"homepage":"https://react-cyber-elements-demo.vercel.app/","language":"TypeScript","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/thiswallz.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-11-05T08:36:38.000Z","updated_at":"2025-03-20T10:49:54.000Z","dependencies_parsed_at":"2023-01-21T07:46:56.601Z","dependency_job_id":null,"html_url":"https://github.com/thiswallz/react-cyber-elements","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":"thiswallz/rollup-react-starter-lib-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiswallz%2Freact-cyber-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiswallz%2Freact-cyber-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiswallz%2Freact-cyber-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiswallz%2Freact-cyber-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thiswallz","download_url":"https://codeload.github.com/thiswallz/react-cyber-elements/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248275759,"owners_count":21076655,"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":["components","elements","hud","library","opensource","react"],"created_at":"2024-07-31T08:01:04.571Z","updated_at":"2025-09-23T12:34:03.618Z","avatar_url":"https://github.com/thiswallz.png","language":"TypeScript","readme":"# react-cyber-elements\n+90 HUD cyberpunk elements. this is and will always be free.\n\n\nWe want to create the biggest cyberpunk open-source project for you to make cool things.\n\nThanks to all for caring!, seems you like the idea of our cyberpunk project, this are our future goals!\n\n### Next steps:\n\n- +1.000 futuristics svg icons components for React, Vue, Svelte and Angular.\n- Add 200 more HUD elements to the currect 90 elements and make them also available to Vue, Svelte and Angular.\n- Wrapper and online storybook to make them easy to search and use in your app.\n- Create a fancy page where we show posibilities with our HUD elements, icons and others!\n- Make fancy assets for everyone (audio/web backgrounds/characters/etc)\n\n\n\nDemo: https://react-cyber-elements-demo.vercel.app/\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-cyber-elements\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-cyber-elements.svg\" alt=\"npm version\" \u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/thiswallz/react-cyber-elements/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://badgen.net/github/license/thiswallz/react-cyber-elements\" alt=\"license\"\u003e\n  \u003c/a\u003e\n \u003ca href=\"https://badgen.net/github/checks/thiswallz/react-cyber-elements\"\u003e\n    \u003cimg src=\"https://badgen.net/github/checks/thiswallz/react-cyber-elements\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://badgen.net/bundlephobia/dependency-count/react-cyber-elements\"\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/dependency-count/react-cyber-elements\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://badgen.net/npm/types/react-cyber-elements\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/types/react-cyber-elements\"  /\u003e\n  \u003c/a\u003e\n    \u003ca href=\"https://badgen.net/bundlephobia/tree-shaking/react-cyber-elements\"\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/tree-shaking/react-cyber-elements\"  /\u003e\n  \u003c/a\u003e\n    \u003ca href=\"https://badgen.net/bundlephobia/minzip/react-cyber-elements\"\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/minzip/react-cyber-elements\" /\u003e\n  \u003c/a\u003e\n\n\u003c/p\u003e\n\n\u003cimage width=\"400px\" src=\"ss1.png\" /\u003e\n\nWelcome to react-cyber-elements\nYou can change the color of the elements with just css.\n\nSimple usage: \u003cCyberEl1 /\u003e to \u003cCyberEl90 /\u003e\nCheckout the docs and sandbox for more info.\n\n## Install\n\nnpm\n\n```\nnpm install react-cyber-elements \n```\n\nyarn\n\n```\nyarn add react-cyber-elements \n```\n\n## Usage\n\n\u003cimg src=\"icon1.png\" width=\"50px\"/\u003e\n\n``` javascript\nimport { CyberEl1 } from 'react-cyber-elements'\n\nexport default function Home() {\n  return (\n    \u003cCyberEl1 \n      style={{\n        width: '100px',\n        height: '100px'\n      }}\n    className=\"cyber-icon\" /\u003e\n  )\n}\n```\n\n## Changing colors\n\nYou can just get access to each path and change stroke and fill properties.\n\n\u003cimg src=\"icon2.png\" width=\"50px\"/\u003e\n\n``` css\n\n.cyber-icon path:nth-of-type(1) {\n  fill: #d600ff !important;\n  stroke: orange;\n}\n\n.cyber-icon path:nth-of-type(2) {\n  fill: #00b8ff !important;\n  stroke: orange;\n}\n\n.cyber-icon path:nth-of-type(3) {\n  fill: yellow !important;\n  stroke: orange;\n}\n\n.cyber-icon path:nth-of-type(4) {\n  fill: #001eff !important;\n  stroke: orange;\n}\n\n.cyber-icon path:nth-of-type(5) {\n  fill: #bd00ff !important;\n}\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiswallz%2Freact-cyber-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthiswallz%2Freact-cyber-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiswallz%2Freact-cyber-elements/lists"}