Іконки

У повній збірці клас trace-icon задає розмір SVG або зображення й вирівнює його поруч із текстом. Додайте власну графіку, наприклад SVG із Lucide.

#Бібліотеки іконок

Виберіть SVG із будь-якої з цих бібліотек і розмістіть безпосередньо в обгортці trace-icon. Вставте розмітку SVG або вкажіть завантажений файл в img.

  • Lucide пропонує контурні іконки з регульованою товщиною ліній.
  • Heroicons пропонує контурні та залиті іконки кількох розмірів.
  • Tabler Icons пропонує контурні та залиті іконки інтерфейсу.
  • Phosphor Icons пропонує іконки з різною товщиною ліній.
  • Bootstrap Icons пропонує SVG із іконками інтерфейсу й логотипами.
  • У Material Symbols можна завантажити SVG у стилях Outlined, Rounded і Sharp.
<span class="trace-icon" aria-hidden="true">
  <img src="/icons/check.svg" alt="" />
</span>
Збережено

#Вбудовані іконки

Розмістіть графіку безпосередньо в обгортці. Позначка Lucide декоративна, бо стан уже передано сусіднім текстом.

<span class="trace-icon" aria-hidden="true"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M20 6 9 17l-5-5" />
</svg>
</span>
Збережено
Збережено

#Напрямлені іконки

Додайте trace-icon-directional до обгортки, якщо іконка має віддзеркалюватися за напрямку справа наліво.

<span class="trace-icon trace-icon-directional" aria-hidden="true"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M5 12h14" />
  <path d="m12 5 7 7-7 7" />
</svg>
</span>
LTR
RTL

Розміри задають токени іконок. Як зробити кнопку з однією іконкою доступною, див. у розділі Кнопки з іконками.