Πώς να οργανώσετε και να συγχρονίσετε αρχεία SVG με το Iconset

Το SVG είναι ένας φοβερός τρόπος για να μεταφέρετε τις διανυσματικές εικόνες σε μια ροή εργασίας σχεδιασμού και ανάπτυξης. Ωστόσο, η συλλογή και η οργάνωση αρχείων SVG στον υπολογιστή σας μπορεί να είναι δύσκολη.

Πώς μπορεί το Iconset να βοηθήσει στην άρση του πόνου και να μας κάνει πιο παραγωγικούς;

  • Τι είναι το SVG;
  • Τι είναι το Iconset;
  • Τι θα μάθουμε;
  • Μέρος 1: Ξεκινώντας με το Iconset
  • Μέρος 2: Προσθήκη εικονιδίων στο Iconset
  • Μέρος 3: Χρήση του Iconset με λογισμικό σχεδιασμού όπως το Figma
  • Μέρος 4: Χρήση του Iconset σε ανάπτυξη όπως με το React
  • Μέρος 5: Συγχρονισμός εικονιδίου σε πολλούς υπολογιστές με Dropbox

Τι είναι το SVG;

Το SVG είναι μια μορφή αρχείου εικόνας σχεδόν 20 ετών. Και ενώ έχει περάσει για λίγο, πρόσφατα κερδίζει δυναμική στην αναπτυξιακή κοινότητα.

Το SVG είναι εξαιρετικό για διάφορους λόγους. Πρώτα απ 'όλα, είναι μια διανυσματική μορφή, που σημαίνει κλίμακα τόσο μεγάλη ή μικρή όσο θέλετε.

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

Όμως η προσπάθεια συλλογής και οργάνωσης μιας δέσμης αρχείων μπορεί να είναι δύσκολη. Τι τους ονομάζεις; Διαθέτετε έναν υπολογιστή που να μπορεί να τις προεπισκοπήσει εύκολα; Τι γίνεται με την αναζήτηση;

Τι είναι το Iconset;

Το Iconset είναι ένα δωρεάν εργαλείο πολλαπλών πλατφορμών που σας επιτρέπει να συλλέγετε και να διαχειρίζεστε όλα τα αρχεία SVG σε ένα μέρος.

Σας αρέσει να μετακινείστε γρήγορα μεταξύ των Font Awesome και των ηρωικών, αλλά δεν θέλετε να συνεχίσετε να αλλάζετε βιβλιοθήκες; Μπορείτε να χρησιμοποιήσετε το Iconset για να κάνετε μια γρήγορη αναζήτηση και να το σύρετε απευθείας στο έργο σας.

Εάν σκοπεύετε να το χρησιμοποιήσετε για ένα έργο React, μπορείτε ακόμη και να αντιγράψετε το αρχείο ως JSX και να το απορρίψετε απευθείας στο έργο σας!

Τι θα μάθουμε;

Θα ακολουθήσουμε μερικά διαφορετικά σενάρια που θα μας δείξουν πώς είναι χρήσιμο το Iconset.

Θα εξετάσουμε επίσης πώς μπορείτε να διαχειριστείτε εύκολα το Iconset μεταξύ διαφορετικών υπολογιστών ή περιβάλλοντος, ώστε να έχετε την ίδια υπέροχη βιβλιοθήκη οπουδήποτε κι αν εργάζεστε.

Μέρος 1: Ξεκινώντας με το Iconset

Για να ξεκινήσετε, θα πρέπει πρώτα να εγκαταστήσετε το Iconset τοπικά. Θα πρέπει να είναι μια παρόμοια διαδικασία εγκατάστασης με οποιαδήποτε άλλη εφαρμογή.

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

Μέρος 2: Προσθήκη εικονιδίων στο Iconset

Η προσθήκη εικονιδίων στο Iconset είναι τόσο εύκολη όσο η μεταφορά, αλλά έχετε μερικές επιλογές κατά τη διάρκεια της διαδικασίας.

Για να ξεκινήσετε, ας κατεβάσουμε το δωρεάν σύνολο χαρακτήρων.

Λήψη στο: //heroicons.com/.

Στον ιστότοπο των ηρωικών, θα πρέπει να δείτε ένα μεγάλο κουμπί Λήψη όλων, το οποίο θα κατεβάσει ένα αρχείο zip συμπεριλαμβανομένων όλων των αρχείων.

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

Τώρα για να τα εισάγετε στο Iconset, επιλέξτε κάθε φάκελο ξεχωριστά και σύρετέ το απευθείας στο Iconset.

Μόλις φτάσετε εκεί, έχετε μερικές επιλογές.

  • Σετ: Εφόσον είναι το πρώτο μας σετ, θα δημιουργείτε αυτόματα ένα νέο. Εάν είχατε υπάρχοντα σύνολα, θα μπορούσατε να εισαγάγετε σε αυτά τα σύνολα.
  • Set Name: Εδώ μπορούμε να ονομάσουμε το σετ κάτι που θα θυμόμαστε. Γι 'αυτό, προτείνω να το ονομάσω "ηρωικοί - Περίγραμμα".
  • Επιλογές εισαγωγής: αυτές είναι προαιρετικές ρυθμίσεις, αλλά συνήθως επιλέγω την επιλογή βελτιστοποίησης και καθαρισμού για να βεβαιωθώ ότι όλα τα εικονίδια είναι άμεσα έτοιμα για εργασία.

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

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

Σε αυτό το σημείο, μπορείτε να χρησιμοποιήσετε το Iconset για να αναζητήσετε τα εικονίδια σας και να δείτε όλα τα αρχεία σας που είναι διαθέσιμα αυτήν τη στιγμή στη συλλογή σας.

Μέρος 3: Χρήση του Iconset με λογισμικό σχεδιασμού όπως το Figma

Το μεγάλο πράγμα για το Iconset είναι πόσο εύκολο είναι να το χρησιμοποιήσετε με λογισμικό σχεδιασμού όπως το Figma.

Αν ήθελα να προσθέσω ένα εικονίδιο φακέλου στον ιστότοπό μου, ώστε να μπορέσουν οι άνθρωποι να επικοινωνήσουν μαζί μου, θα μπορούσα να αναζητήσω το εικονίδιο αλληλογραφίας και απλά να το σύρω στον καμβά μου:

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

Μέρος 4: Χρήση του Iconset σε ανάπτυξη όπως με το React

Ένα άλλο ενδιαφέρον πράγμα είναι πόσο εύκολο είναι να το χρησιμοποιήσετε σε ένα έργο όπως το React.

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

Αν νιώθω ότι το Next.js Sass Starter θα μπορούσε να χρησιμοποιήσει κάποια εικονίδια στη σελίδα, μπορώ να κάνω δεξί κλικ σε οποιοδήποτε εικονίδιο θέλω και στην περιοχή Αντιγραφή ως επιλέξτε JSX μπορώ να το επικολλήσω απευθείας στο έργο μου!

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

Μέρος 5: Συγχρονισμός εικονιδίου σε πολλούς υπολογιστές με Dropbox

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

Όταν το Iconset δημιουργεί τη βιβλιοθήκη σας, αποθηκεύει τα πάντα ως αρχεία και μια βάση δεδομένων στον υπολογιστή σας.

Και μέσα στο περιβάλλον χρήστη του Iconset, μπορούμε να μετακινήσουμε και να αλλάξουμε την τοποθεσία που χρησιμοποιούμε.

Εάν αυτή είναι η πρώτη φορά που ρυθμίζετε το Iconset, μπορείτε να ξεκινήσετε κάνοντας κλικ στην επιλογή Μετακίνηση και, στη συνέχεια, επιλέγοντας την τοποθεσία στην οποία θέλετε να το συγχρονίσετε.

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

Εναλλακτικά, εάν έχετε ήδη μια κοινόχρηστη βιβλιοθήκη Iconset ή εάν τη ρυθμίζετε σε έναν νέο υπολογιστή, μπορείτε να χρησιμοποιήσετε την επιλογή Εναλλαγή και να επιλέξετε αυτήν την επιλογή απευθείας από το Dropbox

Και μόλις πατήσετε το Switch, θα φορτώσετε τώρα την κοινόχρηστη βιβλιοθήκη σας και θα είστε έτοιμοι να γίνετε παραγωγικοί.

Τι άλλο μπορείς να κάνεις?

Δημοσίευση και κοινή χρήση συνόλων εικονιδίων

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

Περισσότερη οργάνωση

Το Iconset υποστηρίζει επίσης λειτουργίες όπως Φάκελοι και Αγαπημένα. Αυτό καθιστά ακόμη πιο εύκολο να ομαδοποιήσετε και να συλλέξετε τα εικονίδια, ωστόσο είναι λογικό να σας κρατήσετε παραγωγικούς.

Υποστηρίζει επίσης την προσθήκη ετικετών, καθιστώντας ακόμη πιο εύκολη την αναζήτηση.

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου
  • ; Χορηγός με