Πώς έφτιαξα ένα σύστημα εικονιδίων από προσαρμοσμένες ιδιότητες CSS Η νοημοσύνη δεδομένων PlatoBlockchain. Κάθετη αναζήτηση. Ολα συμπεριλαμβάνονται.

Πώς έφτιαξα ένα σύστημα εικονιδίων από προσαρμοσμένες ιδιότητες CSS

Χρονική σήμανση: 22 Σεπτεμβρίου 2022 11:17 π.μ.

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

Υπάρχουν πολλοί τρόποι για να συμπεριλάβετε ένα SVG σε μια σελίδα και κάθε τεχνική έχει τα δικά της πλεονεκτήματα και μειονεκτήματα. Τα τελευταία δύο χρόνια, χρησιμοποιώ μια συνάρτηση Sass για να εισάγω απευθείας τα εικονίδια μου στο CSS μου και να αποφεύγω να ανακατεύω τη σήμανση HTML μου.

Έχω μια λίστα Sass με όλους τους πηγαίους κώδικες των εικονιδίων μου. Στη συνέχεια, κάθε εικονίδιο κωδικοποιείται σε ένα URI δεδομένων με συνάρτηση Sass και αποθηκεύεται σε ένα προσαρμοσμένη ιδιοκτησία στη ρίζα της σελίδας.

TL? DR

Αυτό που έχω για εσάς εδώ είναι μια συνάρτηση Sass που δημιουργεί μια βιβλιοθήκη εικονιδίων SVG απευθείας στο CSS σας.

Ο πηγαίος κώδικας SVG μεταγλωττίζεται με τη συνάρτηση Sass που τα κωδικοποιεί σε URI δεδομένων και στη συνέχεια αποθηκεύει τα εικονίδια σε προσαρμοσμένες ιδιότητες CSS. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε οποιοδήποτε εικονίδιο οπουδήποτε στο CSS σας, σαν να ήταν μια εξωτερική εικόνα.

Αυτό είναι ένα παράδειγμα που προέρχεται κατευθείαν από τον κώδικα του προσωπικού μου ιστότοπου:

.c-filters__summary h2:after {
  content: var(--svg-down-arrow);
  position: relative;
  top: 2px;
  margin-left: auto;
  animation: closeSummary .25s ease-out;
}

Διαδήλωση

Sass δομή

/* All the icons source codes */
$svg-icons: (
  burger: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0...'
);

/* Sass function to encode the icons */
@function svg($name) {
  @return url('data:image/svg+xml, #{$encodedSVG} ');
}

/* Store each icon into a custom property */
:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

/* Append a burger icon in my button */
.menu::after {
  content: var(--svg-burger);
}

Αυτή η τεχνική έχει πλεονεκτήματα και μειονεκτήματα, γι' αυτό λάβετε τα υπόψη πριν εφαρμόσετε αυτήν τη λύση στο έργο σας:

ΥΠΕΡ

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

ΚΑΤΑ

  • Δεν μπορείτε να κάνετε κίνηση ή να ενημερώσετε ένα συγκεκριμένο τμήμα του SVG με CSS.
  • Όσο περισσότερα εικονίδια έχετε, τόσο πιο βαρύ θα είναι το μεταγλωττισμένο αρχείο CSS.

Χρησιμοποιώ κυρίως αυτήν την τεχνική για εικονίδια και όχι για λογότυπα ή εικονογραφήσεις. Ένα κωδικοποιημένο SVG θα είναι πάντα πιο βαρύ από το αρχικό του αρχείο, επομένως εξακολουθώ να φορτώνω το σύνθετο SVG μου με ένα εξωτερικό αρχείο είτε με ετικέτα ή στο CSS μου με url(path/to/file.svg).

Κωδικοποίηση SVG σε URI δεδομένων

Η κωδικοποίηση του SVG ως URI δεδομένων δεν είναι νέα. στην πραγματικότητα Ο Chris Coyier έγραψε μια δημοσίευση σχετικά με αυτό πριν από περισσότερα από 10 χρόνια για να εξηγήσετε πώς να χρησιμοποιήσετε αυτήν την τεχνική και γιατί πρέπει (ή δεν πρέπει) να τη χρησιμοποιήσετε.

Υπάρχουν δύο τρόποι για να χρησιμοποιήσετε ένα SVG στο CSS σας με URI δεδομένων:

  • Ως εξωτερική εικόνα (χρησιμοποιώντας background-image,εικόνα συνόρων,λίστα-στυλ-εικόνα,…)
  • Ως περιεχόμενο ενός ψευδοστοιχείου (π.χ ::before or ::after)

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

Το κύριο πρόβλημα με τη συγκεκριμένη υλοποίηση είναι ότι πρέπει να μετατρέπετε το SVG με μη αυτόματο τρόπο κάθε φορά που χρειάζεστε ένα νέο εικονίδιο και δεν είναι πραγματικά ευχάριστο να έχετε αυτή τη μεγάλη σειρά αδιάβαστου κώδικα στο CSS σας.

Εδώ έρχεται να σώσει ο Sass!

Χρησιμοποιώντας μια συνάρτηση Sass

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

Αυτή η λύση είναι ως επί το πλείστον εμπνευσμένη από μια υπάρχουσα λειτουργία που αναπτύχθηκε από την Threespot Media και είναι διαθέσιμη στο το αποθετήριο τους.

Εδώ είναι τα τέσσερα βήματα αυτής της τεχνικής:

  • Δημιουργήστε μια μεταβλητή με όλα τα εικονίδια SVG στη λίστα.
  • Καταχωρίστε όλους τους χαρακτήρες που πρέπει να παραβλεφθούν για ένα URI δεδομένων.
  • Εφαρμόστε μια συνάρτηση για την κωδικοποίηση των SVG σε μια μορφή URI δεδομένων.
  • Χρησιμοποιήστε τη συνάρτησή σας στον κώδικά σας.

1. Λίστα εικονιδίων

/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
  burger: ''
);

2. Λίστα χαρακτήρων που έχουν διαφύγει

/**
* Characters to escape from SVGs
* This list allows you to have inline CSS in your SVG code as well
*/
$fs-escape-chars: (
  ' ': '%20',
  ''': '%22',
  '"': '%27',
  '#': '%23',
  '/': '%2F',
  ':': '%3A',
  '(': '%28',
  ')': '%29',
  '%': '%25',
  '': '%3E',
  '': '%5C',
  '^': '%5E',
  '{': '%7B',
  '|': '%7C',
  '}': '%7D',
);

3. Λειτουργία κωδικοποίησης

/**
* You can call this function by using `svg(nameOfTheSVG)`
*/
@function svg($name) {
  // Check if icon exists
  @if not map-has-key($svg-icons, $name) {
    @error 'icon “#{$name}” does not exists in $svg-icons map';
    @return false;
  }

  // Get icon data
  $icon-map: map-get($svg-icons, $name);

  $escaped-string: '';
  $unquote-icon: unquote($icon-map);
  // Loop through each character in string
  @for $i from 1 through str-length($unquote-icon) {
    $char: str-slice($unquote-icon, $i, $i);

    // Check if character is in symbol map
    $char-lookup: map-get($fs-escape-chars, $char);

    // If it is, use escaped version
    @if $char-lookup != null {
        $char: $char-lookup;
    }

    // Append character to escaped string
    $escaped-string: $escaped-string + $char;
  }

  // Return inline SVG data
  @return url('data:image/svg+xml, #{$escaped-string} ');
}

4. Προσθέστε ένα SVG στη σελίδα σας

button {
  &::after {
    /* Import inline SVG */
    content: svg(burger);
  }
}

Εάν έχετε ακολουθήσει αυτά τα βήματα, το Sass θα πρέπει να μεταγλωττίσει τον κώδικά σας σωστά και να εξάγει τα εξής:

button::after {
  content: url("data:image/svg+xml, %3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024.8%2018.92%27%20width=%2724.8%27%20height=%2718.92%27%3E%3Cpath%20d=%27M23.8,9.46H1m22.8,8.46H1M23.8,1H1%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-linecap=%27round%27%20stroke-width=%272%27%2F%3E%3C%2Fsvg%3E ");
}

Προσαρμοσμένες ιδιότητες

Ο πλέον υλοποιημένος Sass svg() η λειτουργία λειτουργεί τέλεια. Αλλά το μεγαλύτερο ελάττωμά του είναι ότι ένα εικονίδιο που χρειάζεται σε πολλά σημεία στον κώδικά σας θα αντιγραφεί και θα μπορούσε να αυξήσει το βάρος του μεταγλωττισμένου αρχείου CSS σας κατά πολύ!

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

Θα διατηρήσουμε τον ίδιο κώδικα που είχαμε πριν, αλλά αυτή τη φορά θα εξάγουμε πρώτα όλα τα εικονίδια από τη λίστα Sass στη ρίζα της ιστοσελίδας μας:

/**
  * Convert all icons into custom properties
  * They will be available to any HTML tag since they are attached to the :root
  */

:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

Τώρα, αντί να καλέσετε το svg() λειτουργία κάθε φορά που χρειαζόμαστε ένα εικονίδιο, πρέπει να χρησιμοποιούμε τη μεταβλητή που δημιουργήθηκε με το --svg πρόθεμα.

button::after {
  /* Import inline SVG */
  content: var(--svg-burger);
}

Βελτιστοποίηση των SVG σας

Αυτή η τεχνική δεν παρέχει καμία βελτιστοποίηση στον πηγαίο κώδικα του SVG που χρησιμοποιείτε. Βεβαιωθείτε ότι δεν αφήνετε περιττό κωδικό. Διαφορετικά θα κωδικοποιηθούν επίσης και θα αυξήσουν το μέγεθος του αρχείου σας CSS.

Μπορείτε να ελέγξετε αυτή τη μεγάλη λίστα εργαλείων και πληροφοριών για το πώς να βελτιστοποιήσετε σωστά το SVG σας. Το αγαπημένο μου εργαλείο είναι του Jake Archibald SVGOMG — απλώς σύρετε το αρχείο σας εκεί και αντιγράψτε τον κωδικό που εξάγεται.

Μπόνους: Ενημέρωση του εικονιδίου κατά την αιώρηση

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

Για παράδειγμα, εάν έχετε ένα μαύρο εικονίδιο και θέλετε να το έχετε λευκό στο δείκτη του ποντικιού, μπορείτε να χρησιμοποιήσετε το invert() Φίλτρο CSS. Μπορούμε επίσης να παίξουμε με το hue-rotate() φίλτρο.

Αυτό είναι!

Ελπίζω να βρείτε αυτή τη μικρή βοηθητική λειτουργία βολική στα δικά σας έργα. Πείτε μου τη γνώμη σας για την προσέγγιση — θα με ενδιέφερε να μάθω πώς θα το βελτιώσετε ή θα το αντιμετωπίσετε διαφορετικά!

Σφραγίδα ώρας:

Περισσότερα από Κόλπα CSS