react cyber elements

رد فعل عناصر cyber

+90 HUD Cyberpunk Elements. هذا وسيكون دائمًا مجانيًا.

نريد إنشاء أكبر مشروع Cyberpunk مفتوح المصدر لك لصنع أشياء رائعة.

بفضل الجميع على الرعاية! ، يبدو أنك تحب فكرة مشروعنا عبر الإنترنت ، هذه هي أهدافنا المستقبلية!

الخطوات التالية:

• +1.000 مكونات الرموز المستقبلية SVG لـ React و Vue و Svelte و Angular.
• أضف 200 عناصر HUD أخرى إلى 90 عنصرًا وتجعلها متاحة أيضًا لـ Vue و Svelte و Angular.
• Wrapper و Online Storybook لجعلها سهلة البحث والاستخدام في تطبيقك.
• قم بإنشاء صفحة خيالية حيث نعرض posibilities مع عناصر 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 ;
}