Библиотека работы с iconSet

1. Файл с иконками /assets/img/icons.svg 256x256

Всего 8х8 = 64 иконки (размер ячейки 32x32px)

2. Вставка иконки

Первая колонка, второй ряд, размер 64х64

Можно использовать любой контейнер: div, p, b, i, span...

Например: div class="icon x5 y3 s48":

3. В стилях предопределено 5 размеров:
16px 24px (default) 32px 48px 64px

Размер определяется классом .s16 .s48 ...

При необходимости можно добавить любой другой размер
(лучше если это будет кратно 8px)

Например 128х128: Добавить строчку стилей: .s128 {--size: 128px}

4. Вспомогательные классы (.active .hover)

"Двойной" может быть любая иконка, расположенная в любом месте сета. Нужно только учитывать, что данный стиль, огранизует сдвиг вниз на 1 позицию при активном статусе.

.hover

.active

5. Статус (.disabled) + дополнительно выключает активное поведение

Вкл.

Выкл.

6. Несколько сетов иконок

По умолчанию возможно подключить 3 сета, дополнительно: icons2.svg, icons3.svg (классы .set2 .set3

Например, это могут быть отдельные по стилю наборы иконок, с разным предназначением

Для сетов можно искользовать сокращенную форму позиционирования, если только 1 ряд иконок. Изображение 256x64px (8 иконок по 2 состояния) Классы .n1...n8