Geomicons - Iconset SVG yang dikodkan tangan yang unik

Ikon web dengan cepat menjadi norma untuk reka bentuk web moden. Mereka adalah aset besar kepada pereka web kerana ini ikon boleh disesuaikan melalui CSS dan saiznya tanpa kehilangan kualiti.

Tetapi sesetengah pek ikon boleh berasa kembung dan terlalu besar untuk tapak yang lebih kecil. Di situlah Geomicons benar-benar bersinar.

Ini adalah pek ikon berkod tersuai yang berjalan pada SVG. Anda boleh membenamkan ikon melalui skrip JS, atau sebagai fail SVG langsung ke dalam halaman anda. Sama ada cara, mereka vektor yang indah dan sangat mudah untuk restyle.

Halaman Geomicons utama menampilkan demo penuh semua ikon. Mereka cukup mudah dan mengikut gaya reka bentuk rata warna tunggal yang biasa kita kenal.

Tetapi maklumat setup mereka pastinya kurang pada halaman demo. Jika anda ingin mengetahui bagaimana untuk menetapkan ini, anda perlu melawat repo GitHub untuk arahan.

Secara lalai, ini perpustakaan mengandaikan anda bekerja dengan CSS / JS untuk mempunyai ikon ini tertanam terus ke elemen halaman. Namun apabila anda memuat turun ikon dari GitHub, anda akan mendapat semua fail SVG mentah yang boleh anda tambahkan langsung ke HTML.

Hanya masalahnya SVG mentah memerlukan lebih banyak penyuntingan untuk menukar warna, sedangkan laluan JS / CSS memberi anda kawalan ke atas warna melalui kod.

Cuma tambahkan geomicons.min.js skrip ke dalam header anda dan lulus ikon data atribut ke dalam elemen HTML. Ini akan memaparkan ikon auto yang dapat dimanipulasi menggunakan kelas CSS.

Satu lagi perkara yang saya suka tentang Geomicons ialah sokongan untuk Node. Berikut adalah coretan contoh dari repo GitHub:

var geomicons = require ('geomicons-open'); var pathData = geomicons.paths.heart; // Mengembalikan nilai atribut d laluan var svgString = geomicons.toString ('hati'); // Mengembalikan rentetan SVG

Jika anda tidak biasa dengan Node maka anda mungkin tidak perlu menggunakan mana-mana potongan Node. Begitu juga untuk versi React.js ikon ini.

Masih mempunyai sokongan untuk kerangka utama adalah masalah besar. Ia lebih banyak bukti bahawa Geomicons dimaksudkan menyokong mana-mana jenis laman web dengan memberi tumpuan kepada prestasi terlebih dahulu.

Untuk memberikan ikon ini ujian dijalankan, anda boleh tarik salinan melalui npm atau memuat turunnya secara langsung melalui GitHub.

Terdapat juga ikon garis besar yang dipanggil Geomicons Berwayar yang mungkin anda mahu ujian juga.

Sama ada, ini adalah iconset cemerlang untuk pereka web minimalis. Pilihan yang sempurna untuk mengoptimumkan laman web anda dengan ikon yang indah sambil mengurangkan jumlah kali beban halaman.