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: 11 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 (about 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;

}

```