react cyber elements

React-Cyber-Elemente

+90 HUD Cyberpunkelemente. Das ist und wird immer frei sein.

Wir möchten das größte Cyberpunk-Open-Source-Projekt erstellen, damit Sie coole Dinge machen können.

Vielen Dank an alle für die Fürsorge!

Nächste Schritte:

• +1.000 futuristische SVG -Symbole -Komponenten für React, Vue, Suflte und Angular.
• Fügen Sie den Currect 90 -Elementen 200 weitere HUD -Elemente hinzu und stellen Sie sie auch für Vue, Sufle und Angular zur Verfügung.
• Wrapper und Online -Storybook, um sie in Ihrer App einfach zu suchen und zu verwenden.
• Erstellen Sie eine schicke Seite, auf der wir Positionen mit unseren HUD -Elementen, Ikonen und anderen zeigen!
• Machen Sie für alle ausgefallene Assets (Audio-/Web -Hintergründe/Zeichen/etc)

Demo: https://react-cyber-element-demo.vercel.app/

Willkommen bei React-Cyber-Elementen Sie können die Farbe der Elemente mit nur CSS ändern.

Einfache Verwendung: Weitere Informationen finden Sie in den Dokumenten und den Sandbox.

Installieren

NPM

 npm install react-cyber-elements 

Garn

 yarn add react-cyber-elements 

Verwendung

 import { CyberEl1 } from 'react-cyber-elements'

export default function Home ( ) {
  return (
    < CyberEl1 
      style = { {
        width : '100px' ,
        height : '100px'
      } }
    className = "cyber-icon" />
  )
} 

Farben ändern

Sie können einfach Zugriff auf jeden Pfad erhalten und den Schlaganfall ändern und Eigenschaften füllen.

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