Pixmora

Иконка копирования в буфер

Два прямоугольника Lucide копируют текст или код. После успеха логичнее copy-check или короткое сообщение, а не вечная смена цвета без статуса.

Как применить иконку «Два листа»

Сценарий страницы: Копирование в буфер. Основной вариант - lucide:copy, набор Lucide, автор Lucide Contributors, лицензия ISC.

Два листа (copy): Передний и задний прямоугольники: базовая команда копировать. Копировать код, номер, ссылку, реквизиты.

Скопировано (copy-check): Те же листы и галочка: подтверждение. Короткий отклик после успешного копирования.

Буфер и копия (clipboard-copy): Планшет буфера со знаком копирования. Когда метафора именно clipboard, а не двух файлов.

У блока кода 14–16 px. В карточке реквизитов 18–20. Не рисуйте содержимое буфера внутри SVG.

Это пример разметки без обработчиков. Чтение текста из #snippet и запись в буфер сделайте в проекте. Строка TEST демонстрационная. Путь к SVG замените. Сообщите результат копирования текстом или сменой подписи.

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

Файлы SVG

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

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

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

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

<pre id="snippet">TEST</pre>
<button type="button" aria-controls="snippet" aria-label="Копировать код">
  <img src="lucide-copy.svg" width="16" height="16" alt="">
</button>

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

copy или link для копирования URL?

Оба встречаются. copy универсален для любого текста. link уместен, если действие всегда про гиперссылку.

Что делать, если буфер недоступен?

Покажите текст «не удалось скопировать» и выделите содержимое для ручного Ctrl+C. Иконка ошибку платформы не чинит.