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