Иконки

В полной сборке класс 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>

Размеры задаются токенами иконок. Как сделать кнопку с одной иконкой доступной, см. в разделе Кнопки с иконками.