Pixmora

Иконка кода для примера исходника

Угловые скобки Lucide для блока кода. code-xml добавляет слэш тега; square-code обрамляет глиф в квадрат кнопки.

Как применить иконку «Скобки»

Угловые скобки Lucide для блока кода. code-xml добавляет слэш тега; square-code обрамляет глиф в квадрат кнопки.

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

Скобки (code): Две ломаные угловые скобки кода. Блок кода, режим разработчика, API-пример.

XML-тег (code-xml): Скобки и диагональный слэш посередине. Разметка, шаблоны, XML/HTML-контекст.

Код в квадрате (square-code): Скобки внутри скруглённого квадрата. Кнопка панели инструментов IDE-подобного UI.

В табе редактора 16–20 px. В карточке сниппета 24. Не используйте code как значок «безопасность»: защиты он не даёт.

Это пример разметки без подсветки синтаксиса. Якорь #sample-code должен совпадать с id блока. Путь к SVG замените. Строка TEST в примере - тестовая метка, не продакшен-секрет.

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

Файлы SVG

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

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

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

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

<a href="#sample-code">
  <img src="lucide-code.svg" width="20" height="20" alt="">
  Пример кода
</a>
<pre id="sample-code"><code>console.log('TEST')</code></pre>

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

Чем code отличается от terminal?

code - фрагмент исходника. terminal - командная строка и ввод команд.

Нужны ли логотипы языков?

Нет. На странице нейтральные глифы Lucide без брендов языков и платформ.