Pixmora

Иконка обновления данных

Круговые стрелки Lucide запускают повторную загрузку. Это команда пользователя, а не бесконечный спиннер: для ожидания без действия смотрите loader-circle в каталоге.

Как применить иконку «По часовой»

Сценарий страницы: Повторная загрузка данных. Основной вариант - lucide:refresh-cw, набор Lucide, автор Lucide Contributors, лицензия ISC.

По часовой (refresh-cw): Две дуги со стрелками по часовой стрелке. Обновить список, ленту, курс, статус.

Против часовой (refresh-ccw): Тот же цикл, направление против часовой. Когда в продукте уже принят такой оборот или нужен визуальный парный контроль.

Поворот (rotate-cw): Одна дуга и стрелка: скорее повернуть объект, чем перезагрузить данные. Поворот изображения или фигуры на холсте.

В тулбаре таблицы 18–20 px. В пустом состоянии «обновить ленту» 24. Не заменяйте этой иконкой кнопку синхронизации файла в облако без подписи.

Это пример разметки без обработчиков. Запрос к API и состояние загрузки подключите сами. На время запроса можно крутить img через CSS, но не имитируйте работающий JS в статическом примере. Путь к SVG замените.

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Обновить. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<button type="button" aria-label="Обновить список">
  <img src="lucide-refresh-cw.svg" width="20" height="20" alt="">
</button>

Частые вопросы

refresh-cw или loader-circle?

refresh-cw - действие «обновить». loader-circle - индикатор ожидания без обещания ручного запуска.

Нужно ли блокировать кнопку на время запроса?

Да, отключите повторные клики и сообщите статус «Обновляется». Иконка сама по себе запрос не выполняет.