Geomicons - Iconset SVG Kode Tangan Yang Unik

Ikon web dengan cepat menjadi norma untuk desain web modern. Mereka adalah aset besar bagi desainer web karena ini ikon dapat dikustomisasi melalui CSS dan diubah ukurannya tanpa kehilangan kualitas.

Tetapi beberapa paket ikon bisa terasa kembung dan terlalu besar untuk situs yang lebih kecil. Di situlah Geomicons benar-benar bersinar.

Ini adalah sebuah paket ikon kode tangan kustom yang berjalan di SVG. Anda dapat menyematkan ikon melalui skrip JS, atau sebagai file SVG langsung ke halaman Anda. Either way, mereka vektor yang indah dan super mudah untuk restyle.

Halaman Geomicons utama menampilkan demo lengkap semua ikon. Mereka cukup sederhana dan mengikuti gaya desain datar warna tunggal tradisional yang kita semua kenal.

Tetapi informasi pengaturan mereka jelas kurang pada halaman demo. Jika Anda ingin mempelajari cara mengatur ini, Anda harus mengunjungi repo GitHub untuk mendapatkan petunjuk.

Secara default, ini perpustakaan menganggap Anda bekerja dengan CSS / JS agar ikon ini disematkan langsung ke elemen laman. Namun ketika Anda mengunduh ikon dari GitHub Anda mendapatkan semua file SVG mentah yang dapat Anda tambahkan langsung ke HTML.

Satu-satunya masalah adalah itu SVG mentah membutuhkan lebih banyak pengeditan untuk mengubah warna, sedangkan rute JS / CSS memberi Anda kendali atas warna melalui kode.

Cukup tambahkan geomicons.min.js skrip ke header Anda dan lulus ikon data atribut ke elemen HTML. Ikon-ikon ini akan tertanam secara otomatis yang kemudian dapat Anda manipulasi menggunakan kelas CSS.

Hal lain yang sangat saya sukai dari Geomicons adalah dukungan untuk Node. Berikut cuplikan sampel dari repo GitHub:

var geomicons = membutuhkan ('geomicons-open'); var pathData = geomicons.paths.heart; // Mengembalikan nilai atribut d path var svgString = geomicons.toString ('heart'); // Mengembalikan string SVG

Jika Anda tidak terbiasa dengan Node maka Anda mungkin tidak perlu menggunakan potongan Node. Hal yang sama berlaku untuk versi React.js dari ikon-ikon ini.

Masih memiliki dukungan untuk kerangka kerja utama adalah masalah besar. Ini bukti lebih bahwa Geomicons dimaksudkan mendukung semua jenis situs web dengan berfokus pada kinerja terlebih dahulu.

Untuk memberi ikon-ikon ini percobaan, Anda dapat menarik salinan melalui npm atau mengunduhnya langsung melalui GitHub.

Ada juga ikon garis besar yang disebut Geomicons Wired yang mungkin ingin Anda uji juga.

Either way, ini adalah Ikon brilian untuk desainer web minimalis. Pilihan sempurna untuk mengoptimalkan situs Anda dengan ikon-ikon indah sambil mengurangi total waktu pemuatan halaman.