Skip to content

Иконки дизайн-системы в виде UI-компонентов

License

Notifications You must be signed in to change notification settings

sima-land/ui-quarks

Repository files navigation

UI-quarks

Иконки дизайн-системы в виде UI-компонентов.

Разрабатывается в соответствии с дизайн-руководствами.

Установка

# npm
npm i -S @sima-land/ui-quarks

# или yarn
yarn add @sima-land/ui-quarks

Использование

Иконки доступны как React-компоненты:

import AddSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/Add';

function IconicButton() {
  return (
    <button>
      <AddSVG fill='#f00' />
    </button>
  );
}

Также возможно использование иконок в виде файлов .svg.

Добавление новых иконок

Для добавления необходимо:

  • выделить иконку (именно компонент, включая безопасное расстояние);
  • в правой колонке выбрать вкладку "Export";
  • выбрать тип экспорта SVG и нажать кнопку "Export";
  • достать из полученного архива иконку и расположить ее в src/icons/ также, как располагаются остальные иконки

Важно: не надо переименовывать файл иконки (только в крайних случаях), при сборке файл будет автоматически переименован в PascalCase.