Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thiswallz/react-cyber-elements
Library with cyber punk icons / shapes.
https://github.com/thiswallz/react-cyber-elements
components elements hud library opensource react
Last synced: 9 days ago
JSON representation
Library with cyber punk icons / shapes.
- Host: GitHub
- URL: https://github.com/thiswallz/react-cyber-elements
- Owner: thiswallz
- License: mit
- Created: 2022-11-05T08:36:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-08T13:53:28.000Z (almost 2 years ago)
- Last Synced: 2024-10-02T03:25:45.036Z (about 1 month ago)
- Topics: components, elements, hud, library, opensource, react
- Language: TypeScript
- Homepage: https://react-cyber-elements-demo.vercel.app/
- Size: 796 KB
- Stars: 112
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - thiswallz/react-cyber-elements - Library with cyber punk icons / shapes. (TypeScript)
README
# react-cyber-elements
+90 HUD cyberpunk elements. this is and will always be free.We want to create the biggest cyberpunk open-source project for you to make cool things.
Thanks to all for caring!, seems you like the idea of our cyberpunk project, this are our future goals!
### Next steps:
- +1.000 futuristics svg icons components for React, Vue, Svelte and Angular.
- Add 200 more HUD elements to the currect 90 elements and make them also available to Vue, Svelte and Angular.
- Wrapper and online storybook to make them easy to search and use in your app.
- Create a fancy page where we show posibilities with our HUD elements, icons and others!
- Make fancy assets for everyone (audio/web backgrounds/characters/etc)Demo: https://react-cyber-elements-demo.vercel.app/
Welcome to react-cyber-elements
You can change the color of the elements with just css.Simple usage: to
Checkout the docs and sandbox for more info.## Install
npm
```
npm install react-cyber-elements
```yarn
```
yarn add react-cyber-elements
```## Usage
``` javascript
import { CyberEl1 } from 'react-cyber-elements'export default function Home() {
return (
)
}
```## Changing colors
You can just get access to each path and change stroke and fill properties.
``` css
.cyber-icon path:nth-of-type(1) {
fill: #d600ff !important;
stroke: orange;
}.cyber-icon path:nth-of-type(2) {
fill: #00b8ff !important;
stroke: orange;
}.cyber-icon path:nth-of-type(3) {
fill: yellow !important;
stroke: orange;
}.cyber-icon path:nth-of-type(4) {
fill: #001eff !important;
stroke: orange;
}.cyber-icon path:nth-of-type(5) {
fill: #bd00ff !important;
}
```