Дизайн-система Quple | Библиотека иконок

Quple — дизайн-система для разработки интерфейсов, написана на React. В этой библиотеки собраны все иконки, которые используются в дизайн-системе.

Как использовать

Установите пакет

yarn add @quple-pos/uikit @quple-pos/icons

Подключите тему

Чтобы начать работу с библиотекой интерфейсных компонентов, подключите тему.

Можно использовать компоненты

Например, так:

import React from 'react';
import { Theme, presetGpnDefault } from '@quple-pos/uikit/Theme';
import { Button } from '@quple-pos/uikit/Button';
import { IconCancel } from '@quple-pos/icons/IconCancel';

const App = () => (
  <Theme preset={presetGpnDefault}>
    <Button label="Закрыть" iconLeft={IconCancel} onlyIcon />
  </Theme>
);

Документация и стенд

На стенде можно менять параметры и смотреть, как меняются компоненты. Документация — во вкладке у каждого компонента.

Вперёд, к стенду

Разработка

Подготовка окружения

Рабочее окружение должно содержать NodeJS и Yarn.

Чтобы установить зависимости, выполните команду:

$ yarn install

Основные команды

# Запуск локального сервера для разработки
$ yarn start

# Сборка пакета
$ yarn build

# Сборка стенда
$ yarn stand:build

# Запуск тестов
$ yarn test

# Преобразование иконок в компонеты
$ yarn icon-generate

Контрибьюторам

Будем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте инструкцию для контрибьюторов.

Лицензия

Дизайн-систему можно использовать бесплатно, она распространяется на условиях открытой лицензии MIT.