react cyber elements

React-Cyber-Elements

+90 HUDサイバーパンク要素。これは常に無料です。

クールなものを作るために、最大のサイバーパンクのオープンソースプロジェクトを作成したいと考えています。

Caringのすべての人に感謝します！、Cyberpunkプロジェクトのアイデアが好きなようです。これは私たちの将来の目標です！

次のステップ：

• +1.000 Futuristics SVGアイコンコンポーネントReact、Vue、Svelte、Angularのコンポーネント。
• Curerct 90の要素に200個のHUD要素を追加し、Vue、Svelte、Angularも利用できるようにします。
• ラッパーとオンラインストーリーブックは、アプリで簡単に検索して使用できるようにします。
• HUD要素、アイコンなどで容認できる容易なページを作成します！
• すべての人のために派手な資産を作る（オーディオ/ウェブの背景/文字/など）

デモ：https：//react-cyber-elements-demo.vercel.app/

React-Cyber-Elementsへようこそ、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 ;
}