Geomicons - Eşsiz El Kodlu SVG Iconset

Web simgeler kümesi hızla modern web tasarımı için norm haline geliyor. Bunlar web tasarımcılarına büyük varlıklar. simgeler CSS ile özelleştirilebilir ve herhangi bir kalite kaybı olmadan yeniden boyutlandırıldı.

Ancak bazı simge paketleri daha küçük siteler için şişirilmiş ve çok büyük olabilir. Geomicons gerçekten parlıyor.

Bu bir SVG üzerinde çalışan özel el kodlu simge paketi. Simgeleri JS komut dosyaları yoluyla veya sayfanıza doğrudan SVG dosyaları olarak gömebilirsiniz. Her iki durumda da, onlar güzel vektörler ve restyle kolay süper.

Geomicons ana sayfasında tüm ikonların tam bir demosu bulunuyor. Oldukça basitler ve hepimizin bildiği geleneksel tek renkli düz tasarım stilini takip ediyorlar.

Ancak kurulum bilgileri kesinlikle demo sayfasında bulunmuyor. Bunu nasıl ayarlayacağınızı öğrenmek istiyorsanız, talimatlar için GitHub deposunu ziyaret etmeniz gerekir..

Varsayılan olarak, bu kitaplığı, CSS / JS ile çalıştığınızı varsayar bu simgelerin doğrudan sayfa öğelerine gömülü olmasını sağlamak için. Yine de Simgeleri GitHub'dan indirdiğinizde, doğrudan HTML'ye ekleyebileceğiniz tüm ham SVG dosyalarını elde edersiniz..

Tek sorun bu ham SVG'ler daha fazla düzenleme gerektirir Renkleri değiştirmek için ise JS / CSS yolu size kodlar üzerinde renk kontrolü sağlar..

Sadece ekleyin geomicons.min.js betiğini başlığınıza sokun ve veri simgesi HTML öğelerine öznitelik. Bunlar, daha sonra CSS sınıflarını kullanarak işleyebileceğiniz simgeleri otomatik olarak gömecektir..

Geomicons hakkında gerçekten sevdiğim bir diğer şey Düğüm için destek. İşte GitHub deposundan bir örnek pasaj:

var geomicons = zorunlu ('geomicons-open'); var pathData = geomicons.paths.heart; // Yolun d öznitelik değerini döndürür var svgString = geomicons.toString ('heart'); // Bir SVG dizesini döndürür

Düğüm hakkında bilgi sahibi değilseniz, muhtemelen hiçbir zaman Düğüm parçacıklarından herhangi birini kullanmanız gerekmez. Aynı bu simgelerin React.js sürümü için de geçerlidir.

Hala büyük çerçeveler için destek almak çok önemli. Geomicons’lerin kastedildiğinin kanıtı her türlü web sitesini destekleyin önce performansa odaklanarak.

Bu simgelere bir deneme çalışması vermek için npm'den bir kopya çekebilir veya GitHub ile doğrudan indirebilirsiniz..

Ayrıca test etmek isteyebileceğiniz Geomicons Wired adında bir anahat simgeleri var..

Her iki durumda da, bu bir minimalist web tasarımcıları için mükemmel simgeler. Toplam sayfa yükleme süresini kısaltırken sitenizi güzel ikonlarla optimize etmek için mükemmel bir seçim.