Generator sprite'ów CSS

Do czego służy to narzędzie

Generator sprite’ów CSS łączy zestaw ikon lub małych obrazów w jeden arkusz sprite’ów i pisze CSS do wyświetlania każdego z nich. Dodaj pliki PNG, SVG, GIF lub JPG, wybierz sposób ich ułożenia i pobierz sprite PNG razem z arkuszem stylów zawierającym jedną klasę na obraz.

Nazwy klas pochodzą od nazw plików: Home Icon.png staje się .icon-home-icon, a zduplikowane nazwy dostają numer. Układ Upakowany używa algorytmu pakowania, aby zmieścić obrazy różnych rozmiarów na jak najmniejszym arkuszu; układy Pionowy, Poziomy i Siatka dają przewidywalne pozycje.

Jak używać

1. Naciśnij Dodaj obrazy… i wybierz swoje ikony (lub zacznij od przykładowego zestawu).
2. Wybierz Układ i Odstęp. Niewielki odstęp zapobiega przenikaniu sąsiednich ikon, gdy przeglądarka je skaluje.
3. Ustaw Prefiks klas i Nazwę pliku sprite’a używaną w background-image.
4. Wybierz @2x, jeśli twoje obrazy są narysowane w podwójnym rozmiarze dla ekranów Retina.
5. Naciśnij Pobierz PNG i Pobierz CSS (albo Kopiuj obraz, aby wkleić sprite do narzędzia graficznego lub czatu), wgraj oba pliki na serwer i używaj klas: <span class="icon icon-home"></span>.

Przykład

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

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

Wskazówki

• Trzymaj w jednym sprite’cie ikony, które zmieniają się razem; ponowne wygenerowanie arkusza zmienia wszystkie pozycje.
• Dla jednokolorowych ikon, które mają zmieniać kolor przez CSS, lepiej sprawdzi się font z ikonami SVG lub SVG osadzone w kodzie.