react cyber elements

react-cyber-elementos

+90 elementos cyberpunk HUD. Esto es y siempre será libre.

Queremos crear el proyecto de código abierto Cyberpunk más grande para que pueda hacer cosas geniales.

¡Gracias a todos por el cuidado!, ¡Parece que te gusta la idea de nuestro proyecto cyberpunk, ¡estos son nuestros objetivos futuros!

Siguientes pasos:

• +1,000 componentes de iconos SVG de Futuristics para React, Vue, esbelto y angular.
• Agregue 200 elementos HUD más a los elementos Currect 90 y haga que también estén disponibles para Vue, Svelte y Angular.
• Envoltura y libro de cuentos en línea para que sean fáciles de buscar y usar en su aplicación.
• ¡Cree una página elegante donde mostramos posibles con nuestros elementos HUD, íconos y otros!
• Hacer activos elegantes para todos (fondos de audio/web/caracteres/etc.)

Demostración: https://react-cyber-elements-demo.vercel.app/

Bienvenido a React-Cyber-Elements Puede cambiar el color de los elementos con solo CSS.

Uso simple: para revisar los documentos y el sandbox para obtener más información.

Instalar

npm

 npm install react-cyber-elements 

hilo

 yarn add react-cyber-elements 

Uso

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

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

Cambios de colores

Puede obtener acceso a cada ruta y cambiar las propiedades de trazo y llenar.

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