react cyber elements

반응-시버 요소

+90 HUD 사이버 펑크 요소. 이것은 항상 무료입니다.

우리는 당신이 멋진 물건을 만들기 위해 가장 큰 사이버 펑크 오픈 소스 프로젝트를 만들고 싶습니다.

Caring!에게 감사드립니다!, 당신은 사이버 펑크 프로젝트의 아이디어를 좋아하는 것 같습니다. 이것이 우리의 미래의 목표입니다!

다음 단계 :

• +1.000 미래의 SVG 아이콘 반응, vue, svelte 및 angular 용 구성 요소.
• Currect 90 요소에 200 개 더 HUD 요소를 추가하여 Vue, Svelte 및 Angular에도 사용할 수 있도록하십시오.
• 앱에서 쉽게 검색하고 사용하기 위해 래퍼 및 온라인 스토리 북.
• HUD 요소, 아이콘 및 기타와 함께 위치를 보여주는 멋진 페이지를 만듭니다!
• 모든 사람을위한 멋진 자산 만들기 (오디오/웹 배경/문자/등)

데모 : https://react-cyber-elements-demo.vercel.app/

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