Cum am realizat un sistem de pictograme din proprietăți personalizate CSS

SVG este cel mai bun format pentru pictograme de pe un site web, există nicio indoiala despre asta. Vă permite să aveți pictograme ascuțite, indiferent de densitatea pixelilor ecranului, puteți schimba stilurile SVG-ului la hover și puteți chiar anima pictogramele cu CSS sau JavaScript.

Există multe modalități de a include un SVG pe o pagină și fiecare tehnică are propriile avantaje și dezavantaje. În ultimii câțiva ani, am folosit o funcție Sass pentru a-mi importa direct pictogramele în CSS-ul meu și pentru a evita să fiu nevoit să-mi distrug marcajul HTML.

Am o listă Sass cu toate codurile sursă ale pictogramelor mele. Fiecare pictogramă este apoi codificată într-un URI de date cu o funcție Sass și stocată într-un proprietate personalizată pe rădăcina paginii.

TL; DR

Ceea ce am pentru tine aici este o funcție Sass care creează o bibliotecă de pictograme SVG direct în CSS-ul tău.

Codul sursă SVG este compilat cu funcția Sass care le codifică în URI de date și apoi stochează pictogramele în proprietăți personalizate CSS. Apoi puteți utiliza orice pictogramă oriunde în CSS ca și cum ar fi o imagine externă.

Acesta este un exemplu extras direct din codul site-ului meu personal:

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

Demo

Structura 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);
}		

Această tehnică are atât avantaje, cât și dezavantaje, așa că vă rugăm să le luați în considerare înainte de a implementa această soluție în proiectul dvs.:

Pro-uri

• Nu există solicitări HTTP pentru fișierele SVG.
• Toate pictogramele sunt stocate într-un singur loc.
• Dacă trebuie să actualizați o pictogramă, nu trebuie să treceți peste fiecare fișier de șabloane HTML.
• Pictogramele sunt stocate în cache împreună cu CSS.
• Puteți edita manual codul sursă al pictogramelor.
• Nu poluează codul HTML prin adăugarea de markup suplimentar.
• Puteți schimba în continuare culoarea sau un aspect al pictogramei cu CSS.

Contra

• Nu puteți anima sau actualiza o anumită parte a SVG cu CSS.
• Cu cât aveți mai multe pictograme, cu atât fișierul dvs. compilat CSS va fi mai greu.

Folosesc mai ales această tehnică pentru icoane, mai degrabă decât pentru logo-uri sau ilustrații. Un SVG codificat va fi întotdeauna mai greu decât fișierul său original, așa că încărc SVG-ul meu complex cu un fișier extern, fie cu un eticheta sau în CSS-ul meu cu url(path/to/file.svg).

Codificarea SVG în URI de date

Codificarea SVG-ului dvs. ca URI de date nu este nouă. De fapt Chris Coyier a scris o postare despre asta acum peste 10 ani pentru a explica cum să folosești această tehnică și de ce ar trebui (sau nu ar trebui) să o folosești.

Există două moduri de a utiliza un SVG în CSS cu URI de date:

• Ca imagine externă (folosind background-image,chenar-imagine,list-style-image,...)
• Ca conținutul unui pseudo element (de ex ::before or ::after)

Iată un exemplu de bază care arată cum să utilizați aceste două metode:

Principala problemă cu această implementare specială este că trebuie să convertiți manual SVG-ul de fiecare dată când aveți nevoie de o nouă pictogramă și nu este chiar plăcut să aveți acest șir lung de cod ilizibil în CSS.

Aici vine Sass în ajutor!

Folosind o funcție Sass

Folosind Sass, ne putem simplifica viața prin copierea codului sursă al SVG-ului nostru direct în baza noastră de coduri, lăsând Sass să le codifice corect pentru a evita orice eroare de browser.

Această soluție este inspirată în mare parte dintr-o funcție existentă dezvoltată de Threespot Media și disponibilă în depozitul lor.

Iată cei patru pași ai acestei tehnici:

• Creați o variabilă cu toate pictogramele dvs. SVG listate.
• Listați toate caracterele care trebuie să fie ignorate pentru un URI de date.
• Implementați o funcție pentru a codifica SVG-urile într-un format URI de date.
• Utilizați funcția dvs. în cod.

1. Lista de pictograme

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

2. Lista caracterelor evadate

/**
* 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. Funcția de codificare

/**
* 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. Adăugați un SVG în pagina dvs

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

Dacă ați urmat acești pași, Sass ar trebui să vă compilați corect codul și să scoată următoarele:

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 ");
}		

Proprietăți personalizate

Sass, implementat acum svg() functia functioneaza excelent. Dar cel mai mare defect al său este că o pictogramă care este necesară în mai multe locuri din codul tău va fi duplicată și ar putea crește greutatea fișierului CSS compilat cu mult!

Pentru a evita acest lucru, putem stoca toate pictogramele noastre în variabile CSS și utilizați o referință la variabilă în loc să scoateți URI-ul codificat de fiecare dată.

Vom păstra același cod pe care îl aveam înainte, dar de data aceasta vom scoate mai întâi toate pictogramele din lista Sass în rădăcina paginii noastre web:

/**
  * 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)};
  }
}

Acum, în loc să suni la svg() de fiecare dată când avem nevoie de o pictogramă, trebuie să folosim variabila care a fost creată cu --svg prefix.

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

Optimizarea SVG-urilor dvs

Această tehnică nu oferă nicio optimizare a codului sursă al SVG-ului pe care îl utilizați. Asigurați-vă că nu lăsați cod inutil; în caz contrar, vor fi și ele codificate și vor crește dimensiunea fișierului CSS.

Puteți verifica această listă grozavă de instrumente și informații despre cum să vă optimizați corect SVG-ul. Instrumentul meu preferat este al lui Jake Archibald SVGOMG — pur și simplu trageți fișierul acolo și copiați codul rezultat.

Bonus: Actualizarea pictogramei la trecerea cursorului

Cu această tehnică, nu putem selecta cu CSS părți specifice ale SVG-ului. De exemplu, nu există nicio modalitate de a schimba fill culoarea pictogramei atunci când utilizatorul trece cu mouse-ul pe butonul. Dar există câteva trucuri pe care le putem folosi cu CSS pentru a putea încă modifica aspectul pictogramei noastre.

De exemplu, dacă aveți o pictogramă neagră și doriți să o aveți albă, puteți utiliza invert() filtru CSS. Ne putem juca și cu hue-rotate() filtru.

Asta e!

Sper că veți găsi această mică funcție de ajutor la îndemână în propriile proiecte. Spuneți-mi ce părere aveți despre abordare — aș fi interesat să știu cum ați îmbunătăți acest lucru sau cum ați aborda-o altfel!