Geomicons - Ένα μοναδικό χειρόγραφο SVG Iconset

Τα εικονίδια ιστού γίνονται γρήγορα ο κανόνας για τον σύγχρονο σχεδιασμό ιστοσελίδων. Είναι τεράστια περιουσιακά στοιχεία για τους σχεδιαστές ιστοσελίδων, όπως αυτά τα εικονίδια μπορούν να προσαρμοστούν μέσω του CSS και να αλλάξει το μέγεθος χωρίς απώλεια ποιότητας.

Ωστόσο, ορισμένα πακέτα εικονιδίων μπορούν να αισθάνονται φουσκωμένα και πολύ μεγάλα για μικρότερες τοποθεσίες. Αυτό είναι όπου Geomicons λάμπει πραγματικά.

Αυτό είναι ένα προσαρμοσμένο χειροκίνητο πακέτο εικονιδίων που εκτελείται σε SVG. Μπορείτε να ενσωματώσετε τα εικονίδια μέσω σεναρίων JS ή ως άμεσα αρχεία SVG στη σελίδα σας. Είτε έτσι είτε αλλιώς, είναι όμορφα διανύσματα και είναι εξαιρετικά εύκολο να αποκατασταθεί.

Η κύρια σελίδα Geomicons διαθέτει μια πλήρη επίδειξη όλων των εικονιδίων. Είναι αρκετά απλά και ακολουθούν το παραδοσιακό μονόχρωμο επίπεδο στυλ σχεδιασμού που όλοι γνωρίζουμε.

Αλλά οι πληροφορίες εγκατάστασής τους σίγουρα λείπουν στη σελίδα επίδειξης. Αν θέλετε να μάθετε πώς να ρυθμίσετε αυτό το θέμα, θα χρειαστεί να επισκεφθείτε το repo GitHub για οδηγίες.

Από προεπιλογή, αυτό Η βιβλιοθήκη υποθέτει ότι εργάζεστε με το CSS / JS για να έχουν αυτά τα εικονίδια ενσωματωμένα απευθείας σε στοιχεία σελίδας. Ωστόσο, όταν κάνετε λήψη των εικονιδίων από το GitHub, θα έχετε όλα τα ωμά αρχεία SVG τα οποία μπορείτε να προσθέσετε απευθείας στο HTML.

Μόνο πρόβλημα είναι αυτό τα ωμά SVG απαιτούν περισσότερη επεξεργασία για να αλλάξετε χρώματα, ενώ η διαδρομή JS / CSS σας δίνει τον έλεγχο των χρωμάτων μέσω του κώδικα.

Απλά προσθέστε το geomicons.min.js script στην κεφαλίδα σας και να περάσει το εικονίδιο δεδομένων χαρακτηριστικό σε στοιχεία HTML. Αυτά θα ενσωματώσουν αυτόματα εικονίδια, τα οποία μπορείτε στη συνέχεια να χειριστείτε χρησιμοποιώντας κλάσεις CSS.

Ένα άλλο πράγμα που μου αρέσει πολύ για το Geomicons είναι η υποστήριξη του κόμβου. Ακολουθεί ένα δείγμα από το repo του GitHub:

var geomicons = απαιτούν ('geomicons-open'); var pathData = geomicons.paths.heart; // Επιστρέφει την τιμή του χαρακτηριστικού d της διαδρομής var svgString = geomicons.toString ('καρδιά'); // Επιστρέφει μια συμβολοσειρά SVG

Αν δεν είστε εξοικειωμένοι με τον κόμβο, τότε πιθανότατα δεν θα χρειαστεί ποτέ να χρησιμοποιήσετε κάποιο από τα αποκόμματα κόμβων. Το ίδιο ισχύει και για την έκδοση React.js αυτών των εικονιδίων.

Εξακολουθώντας να υποστηρίζουμε σημαντικά πλαίσια είναι μια μεγάλη υπόθεση. Είναι περισσότερη απόδειξη ότι οι Geomicons προορίζονται να υποστήριξη οποιουδήποτε τύπου ιστότοπου εστιάζοντας πρώτα στην απόδοση.

Για να δώσετε σε αυτά τα εικονίδια μια δοκιμαστική λειτουργία, μπορείτε να τραβήξετε ένα αντίγραφο μέσω npm ή να τα κατεβάσετε απευθείας μέσω του GitHub.

Υπάρχει επίσης ένα εικονίδιο περίγραμμα που ονομάζεται Geomicons Wired ότι ίσως θέλετε να δοκιμάσετε επίσης.

Είτε έτσι είτε αλλιώς, αυτό είναι α λαμπρή εικόνα για τους μινιμαλιστές σχεδιαστές ιστοσελίδων. Μια τέλεια επιλογή για βελτιστοποίηση του ιστότοπού σας με όμορφα εικονίδια, μειώνοντας ταυτόχρονα τους συνολικούς χρόνους φόρτωσης σελίδας.