Satır içi ve eleman kullanımı hakkında konuşmak için çok zaman harcadık . Avantajlarla dolu bir ikon sistemi kurabilirsiniz.
Başka şekillerde olsa da bir SVG simge sistemi oluşturabilirsiniz. SVG'de geleneksel bir ızgaralı hareketli grafik sayfası düzenleyebilir ve tarama görüntülerinde yaptığımız gibi arka planda konumlandırılmış hareketli grafikler yapabilirsiniz. Gelecekte, parça tanımlayıcıları kullanabileceksiniz, böylece biraz daha kolay hale gelir. Bu şeyler hakkında daha fazla bilgi.
Başka bir yol da SVG görüntüsünün veri URI'larını doğrudan bir CSS dosyasına yerleştirmektir. Grunticon'un kullandığı yaklaşım budur.
Grunticon, bir SVG simge sistemini otomatikleştirmek için kullanılan bir Grunt eklentisidir. SVG ile dolu bir klasörü alır ve bunları bir CSS dosyası olarak işler. SVG görüntülerinin dosya adlarına bağlı background-imageolarak, SVG veri URI'sine sahip (Base64 değil) bir grup seçici var .
Bu şekilde yapmak, SVG'nin ölçeklenebilirliği ve dosya boyutu avantajları elde edeceğiniz anlamına gelir, ancak bu kadar. Yine de, çoğu zaman ihtiyacınız olan tek şey budur.
Grunticon'un belki de en iyi yanı, size geri dönüşler için gereken her şeyi vermesidir. Bu, veri URI PNG'leri ve hatta bireysel PNG'lerin kendileri için (sizin için oluşturduğu) alternatif bir stil sayfası içerir. Ayrıca, desteği belirlemek ve yalnızca uygun stil sayfasını yüklemek için sayfanızda kullandığınız bir komut dosyası.
Şimdilik, bunun geri dönüşleri defs / teknikten daha kolay işlediğini söylemenin adil olduğunu düşünüyorum . İmkansız olduğundan değil.
Grumpicon, bu ekran video kaydında kullandığımız Grunticon'un tarayıcı içi bir sürümüdür.
Grunticon, ben bunu yazarken, gömülü satır içi SVG'ye kadar aşamalı olarak iyileştirmenin bir yolu üzerinde çalışıyor ki bu oldukça havalı olurdu!