Генератор 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.