Icon

Системные значки символизируют файлы, страницы и назначения действия. Обычно иконки разработаны так, чтобы быть простыми, современными и дружелюбными. У пользователя не должно возникать ассоциативных вопросов, картинка должна быть простой и понятной.

Структура компонента

Обычно мы имеем картинки иконок, которые в свою очередь помещаются в отдельную фиксированную по размерам область. Делаем так для того, чтобы иконки были оного размера и располагались ровно.

Реализация

Мы не выделяем иконки в отдельные компоненты, однако импортируем их в определенный css файл, а уже из него вызываем нужные в компонент, который проектируем. Выглядит это следующим образом.

.Q_Icon.cross {
  background-image: url('cross.svg');
}

.Q_Icon.user {
  background-image: url('roles.svg');
}

Затем импортируем файл с иконками в нужный файл с компонентом и обращается к иконке, которая требуется.

Ссылки

Также для тебя ссылки на Figma с дизайн системой и GitHub с библиотекой компонентов.

Составляющие

Этот компонент часто выводится в следующих компонентах