Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

Awesome Lists containing this project

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/



npm version


license















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;
}
```