Генератор CSS-спрайтов

Что делает инструмент

Генератор CSS-спрайтов объединяет набор иконок или небольших изображений в один спрайт и пишет CSS для отображения каждого из них. Добавьте файлы PNG, SVG, GIF или JPG, выберите раскладку и скачайте PNG-спрайт вместе с таблицей стилей, где на каждое изображение приходится один класс.

Имена классов берутся из имён файлов: Home Icon.png превращается в .icon-home-icon, а повторяющиеся имена получают номер. Плотная раскладка использует упаковку в контейнеры, чтобы разместить изображения разных размеров на листе минимальной площади; Вертикальная, Горизонтальная и Сетка дают предсказуемые позиции.

Как пользоваться

1. Нажмите Добавить изображения… и выберите иконки (или начните с примера).
2. Выберите Раскладку и Отступ. Небольшой отступ не даёт соседним иконкам «просачиваться» друг в друга при масштабировании в браузере.
3. Задайте Префикс класса и Имя файла спрайта, которое используется в background-image.
4. Выберите @2x, если изображения нарисованы в двойном размере для Retina-экранов.
5. Нажмите Скачать PNG и Скачать CSS (или Копировать изображение, чтобы вставить спрайт в редактор дизайна или чат), загрузите оба файла на сайт и используйте классы: <span class="icon icon-home"></span>.

Пример

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

Советы

• Держите в одном спрайте иконки, которые меняются вместе: пересборка листа меняет все позиции.
• Для одноцветных иконок, цвет которых нужно менять через CSS, лучше подойдёт иконочный шрифт на SVG или встроенный SVG.