react cyber elements

反应元素

+90 HUD CyberPunk元素。这是并且将永远是免费的。

我们希望创建最大的Cyberpunk开源项目，以便您制作凉爽的东西。

感谢所有人的关心！，您似乎喜欢我们的CyberPunk项目的想法，这是我们的未来目标！

下一步：

• +1.000未来的svg图标组件，用于反应，vue，svelte and Angular。
• 在Courtect 90元素中添加200个HUD元素，并使它们也可用于Vue，Svelte and Angular。
• 包装器和在线故事书，使它们易于在您的应用中搜索和使用。
• 创建一个花哨的页面，在其中我们显示了使用HUD元素，图标和其他人的提示！
• 为每个人制作花式资产（音频/网络背景/角色/等）

演示：https：//reeact-cyber-elements-demo.vercel.app/

欢迎使用React-Cyber元素，您只需CSS即可更改元素的颜色。

简单用法：查看文档和沙箱以获取更多信息。

安装

NPM

 npm install react-cyber-elements 

纱

 yarn add react-cyber-elements 

用法

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

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

改变颜色

您可以访问每条路径并更改中风并填充属性。

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