Иконка (Heroicons)

Выбор из Heroicons v2 — 291 иконка набора outline, каждая с превью в выпадающем списке. Хранится только имя: arrow-right-circle.

Список — подсказка, а не ограничение: поле принимает и введённое руками имя, так что иконка, добавленная в Heroicons позже, заработает без обновления компонента.

В колонке таблицы значение показывается самой иконкой, настраивать ничего не нужно.

Вывод: хранится только имя. Компонент сам превратит его в инлайновый SVG:

{heroicon($block.icon)}
{heroicon($block.icon style='solid' class='w-6 h-6')}

Начертание выбирается при выводе, а не у поля: одно и то же сохранённое имя даёт любой из наборов, и настройки стиля у поля нет. style принимает outline (по умолчанию) или solid; всё остальное считается за outline.

Можно обойтись и без функции — значение это просто строка:

<svg class="icon"><use href="/assets/icons/sprite.svg#{$icon}"></use></svg>

И превью, и {heroicon()} обращаются к unpkg.com

Список и грид тянут превью с CDN. Если у менеджера нет доступа в интернет, они не ломаются, а бледнеют — имена и сохранённые значения не страдают, просто выбирать приходится вслепую. Превью всегда outline, что бы ни рисовал шаблон.

{heroicon()} забирает SVG с того же CDN и кэширует его навсегда, то есть на страницу приходится максимум один запрос на иконку и начертание. Если сервер не должен ходить наружу вовсе — рисуйте иконку из своего спрайта.