Иконки дизайн-системы в виде 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.