react cyber elements

Реакт-цибер-элементы

+90 HUD Cyberpunk Elements. Это и всегда будет бесплатным.

Мы хотим создать самый большой проект с открытым исходным кодом Cyberpunk для вас, чтобы сделать крутые вещи.

Благодаря всем за заботу!, Кажется, вам нравится идея нашего проекта Cyberpunk, это наши будущие цели!

Следующие шаги:

• +1,000 футуристика SVG Компоненты для React, Vue, Svelte и Angular.
• Добавьте еще 200 элементов HUD в элементы Currect 90 и сделать их также доступными для 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 ;
}