de Sarah Dayan

Sa facem pictograme multicolore cu simboluri SVG si variabile CSS
Lucruri creative de Kyle Adams

Să facem pictograme multicolore cu simboluri SVG și variabile CSS

Au trecut de mult vremea utilizării imaginilor și a spriturilor CSS pentru a crea pictograme pentru web. Odată cu explozia fonturilor web, fonturile pictograme au devenit soluția numărul unu pentru afișarea pictogramelor în proiectele dvs. web.

Fonturile sunt vectori, deci nu trebuie să vă faceți griji cu privire la rezoluție. Beneficiază de aceleași proprietăți CSS ca textul. Ca urmare, aveți control deplin asupra dimensiunii, culorii și stilului. Puteți adăuga transformări, efecte și decorațiuni precum rotații, sublinieri sau umbre.

1612044789 998 Sa facem pictograme multicolore cu simboluri SVG si variabile CSS
Nu este de mirare că au fost descărcate proiecte precum Font Awesome de peste 15 milioane de ori numai pe npm până azi.

Fonturile cu pictograme nu sunt perfecte, motiv pentru care un număr tot mai mare de oameni preferă utilizarea imaginilor SVG în linie. CSS Tricks a scris un lista zonelor în care fonturile pictograme sunt scurte în comparație cu elementele SVG native: claritate, poziționare sau chiar eșecuri din cauza încărcării pe mai multe domenii, a erorilor specifice browserului și a blocatorilor de anunțuri. Acum puteți ocoli majoritatea acestor probleme, făcând în general fonturile de pictograme o alegere sigură.

Cu toate acestea, există un lucru care rămâne absolut imposibil cu fonturile de pictograme: suport multicolor. Doar SVG poate face acest lucru.

TL; DR: această postare aprofundează cum și de ce. Dacă doriți să înțelegeți întregul proces de gândire, citiți mai departe. În caz contrar, puteți consulta codul final CodePen.

Configurarea pictogramelor simbolului SVG

Problema cu SVG-urile în linie este cât de detaliate sunt. Nu doriți să copiați / lipiți toate aceste coordonate de fiecare dată când trebuie să utilizați aceeași pictogramă. Acest lucru ar fi repetitiv, greu de citit și durere de întreținut.

Cu pictogramele simbolului SVG, aveți o copie a fiecărui element SVG și le instanțiați oriunde cu o referință.

Începeți prin includerea liniei SVG, ascundeți-o, înfășurați-o într-un <symbol> și identifică-l with un atribut id.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">  <symbol id="my-first-icon" viewBox="0 0 20 20">    <title>my-first-icon</title>    <path d="..." />  </symbol></svg>

Marcajul complet SVG este inclus o dată și ascuns în HTML.

Apoi, tot ce trebuie să faceți este să instanțiați pictograma cu un <use> element.

<svg>  <use xlink:href="https://www.freecodecamp.org/news/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4/#my-first-icon" /></svg>

Aceasta va afișa o copie exactă a pictogramei SVG originale.

1612044790 619 Sa facem pictograme multicolore cu simboluri SVG si variabile CSS

Asta este! Destul de frumos, nu?

Probabil că ai observat amuzantul xlink:href atribut: acesta este legătura dintre instanța dvs. și SVG-ul original.

Este important să menționăm asta xlink:href este un atribut SVG depreciat. Chiar dacă majoritatea browserelor încă o acceptă, ar trebui să folosiți href in schimb. Acum chestia este că unele browsere precum Safari nu acceptă referințe de resurse SVG prin intermediul href atribut, deci trebuie totuși să furnizați xlink:href.

Pentru a fi în siguranță, furnizați ambele atribute.

Adăugarea unor culori

Spre deosebire de fonturi, color nu are niciun efect asupra pictogramelor SVG: trebuie să utilizați fill atribute pentru a defini o culoare. Acest lucru înseamnă că nu vor moșteni culoarea textului părinte, așa cum fac fonturile de pictograme, dar le puteți stiliza în CSS.

// HTML<svg class="icon">  <use xlink:href="https://www.freecodecamp.org/news/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4/#my-first-icon" /></svg>
// CSS.icon {  width: 100px;  height: 100px;  fill: red;}

De aici, puteți crea alte instanțe ale aceleiași pictograme cu o culoare de umplere diferită.

// HTML<svg class="icon icon-red">  <use xlink:href="https://www.freecodecamp.org/news/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4/#my-first-icon" /></svg>
<svg class="icon icon-blue">  <use xlink:href="https://www.freecodecamp.org/news/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4/#my-first-icon" /></svg>
// CSS.icon {  width: 100px;  height: 100px;}.icon-red {  fill: red;}.icon-blue {  fill: blue;}

Funcționează, dar nu este așa exact ceea ce vrem. Până în prezent, tot ceea ce am făcut poate fi realizat cu un font de pictograme obișnuit. Ceea ce ne dorim este să avem un diferit culoare pentru fiecare parte a icoanei. Vrem să le umplem pe fiecare cale cu o culoare diferită, fără a modifica alte instanțe și dorim să putem să o suprascriem dacă este necesar.

La început, ai putea fi tentat să te bazezi pe specificitate.

// HTML<svg xmlns="http://www.w3.org/2000/svg" style="display: none">  <symbol id="my-first-icon" viewBox="0 0 20 20">    <title>my-first-icon</title>    <path class="path1" d="..." />    <path class="path2" d="..." />    <path class="path3" d="..." />  </symbol></svg>
<svg class="icon icon-colors">  <use xlink:href="https://www.freecodecamp.org/news/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4/#my-first-icon" /></svg>
// CSS.icon-colors .path1 {  fill: red;}.icon-colors .path2 {  fill: green;}.icon-colors .path3 {  fill: blue;}

Acest lucru nu va funcționa.

Încercăm să stilăm .path1, .path2 și .path3 de parcă ar fi cuibărite în .icon-colors, dar tehnic vorbind ei nu sunt. <use> element estenu este un loctitular care este înlocuit cu definiția dvs. SVG. EuE un refcare clonează conținutul pe care îl îndreaptă spre into umbracum DOM?

Ce putem face atunci? Cum putem afecta conținutul copiilor într-un mod cuprinzător atunci când acești copii nu sunt în DOM?

Variabile CSS pentru salvare

În CSS, unele proprietăți sunt moștenite de la strămoși la copii. Dacă atribuiți o culoare text textului body, tot textul din pagină va moșteni acea culoare până când va fi suprascris. Strămoșul nu este conștient de copii, ci de moștenită stilurile sunt încă propagate.

În exemplul nostru timpuriu, am moștenit fill proprietate. Uită-te din nou și vei vedea că clasa în care am declarat a fill culoarea este atașată pe instanțe, nu definițiile. Așa am reușit să obținem culori diferite pentru fiecare instanță a unei singure definiții.

Iată problema: vrem să trecem diferit culori pentru diferit căile SVG-ului original, dar există doar una fill atribut din care putem moșteni.

Întâlni Variabile CSS.

Variabilele CSS sunt declarate în seturi de reguli la fel ca orice altă proprietate. Le puteți denumi orice doriți și le puteți atribui orice valoare CSS validă. Apoi, îl declarați ca valoare pentru sine sau orice proprietate pentru copii și va fi moștenit.

.parent {  --custom-property: red;  color: var(--custom-property);}

Toți copiii din .parent va avea text roșu.

.parent {  --custom-property: red;}.child {  color: var(--custom-property);}

Toate .child cuibărit în .parent elementele vor avea text roșu.

Acum, să aplicăm acest concept simbolului nostru SVG. Vom folosi fill atribut pe fiecare cale a definiției SVG și setați-le la diferite variabile CSS. Apoi, le vom atribui diferite culori.

// HTML<svg xmlns="http://www.w3.org/2000/svg" style="display: none">  <symbol id="my-first-icon" viewBox="0 0 20 20">    <title>my-first-icon</title>    <path fill="var(--color-1)" d="..." />    <path fill="var(--color-2)" d="..." />    <path fill="var(--color-3)" d="..." />  </symbol></svg>
<svg class="icon icon-colors">  <use xlink:href="https://www.freecodecamp.org/news/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4/#my-first-icon" /></svg>
// CSS.icon-colors {  --color-1: #c13127;  --color-2: #ef5b49;  --color-3: #cacaea;}

Și… funcționează! ?

1612044790 465 Sa facem pictograme multicolore cu simboluri SVG si variabile CSS

De acum înainte, tot ce trebuie să facem pentru a crea o instanță cu o altă schemă de culori este să creăm o nouă clasă.

// HTML<svg class="icon icon-colors-alt">  <use xlink:href="https://www.freecodecamp.org/news/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4/#my-first-icon" /></svg>
// CSS.icon-colors-alt {  --color-1: brown;  --color-2: yellow;  --color-3: pink;}

Dacă totuși doriți să aveți pictograme monocrome, nu trebuie să repetați aceeași culoare pe fiecare variabilă CSS. În schimb, puteți declara un singur fill regulă: deoarece variabilele CSS nu sunt definite, aceasta va reveni asupra dvs. fill declaraţie.

.icon-monochrome {  fill: grey;}

Ta fill declarația va funcționa deoarece fill atributele de pe SVG original sunt setate cu valori nedefinite ale variabilelor CSS.

Ce să denumesc variabilele mele CSS?

Există, de obicei, două rute pe care le puteți lua atunci când vine vorba de denumirea lucrurilor în CSS: descriptiv sau semantic. Descriptiv înseamnă apelarea unei culori ce este: dacă depozitați #ff0000, l-ai numi --red. Semantic înseamnă a apela culoarea prin cum se aplică: dacă folosești #ff0000 pentru mânerul unei cești de cafea, ai spune-o --cup-handle-color.

Numele descriptive ar putea fi primul tău instinct. De atunci se simte USCAT #ff0000 poate fi folosit pentru alte lucruri decât mânerul ceașcii de cafea. A --red Variabila CSS este reutilizabilă pentru alte căi de pictograme care trebuie să fie roșii. La urma urmei, așa funcționează CSS-ul utilitar este un sistem fin.

Problema este, în cazul nostru nu putem aplica clase granulare elementelor pe care dorim să le stilizăm. Principiile privind utilitatea în primul rând nu se pot aplica, deoarece avem o singură referință pentru fiecare pictogramă și trebuie să o stilizăm prin variații de clasă.

Folosind nume de clase semantice, cum ar fi --cup-handle-color de exemplu, are mai mult sens pentru acest caz de utilizare. Când doriți să schimbați culoarea unei părți a unei pictograme, știți instantaneu ce este și ce să suprascrieți. Numele clasei va rămâne relevant indiferent de culoarea pe care o atribuiți.

În mod implicit sau nu implicit

Este tentant să faci din versiunea multicoloră a pictogramelor starea lor implicită. În acest fel, le-ați putea folosi fără a fi nevoie de un stil suplimentar și veți adăuga propriile clase numai atunci când este necesar.

Există două modalități de a realiza acest lucru: :rădăcină și var () implicit.

:rădăcină

Puteți defini toate variabilele CSS pe :root selector. Acest lucru le menține pe toate într-un singur loc și vă permite să „împărtășiți” culori similare. :root are cea mai mică prioritate, deci rămâne ușor de înlocuit.

:root {  --color-1: red;  --color-2: green;  --color-3: blue;  --color-4: var(--color-1);}
.icon-colors-alt {  --color-1: brown;  --color-2: yellow;  --color-3: pink;  --color-4: orange;}

In orice caz, există dezavantaje majore ale acestei metode. În primul rând, păstrarea definițiilor culorilor separate de pictogramele lor respective poate fi confuză. Când decideți să le suprascrieți, trebuie să mergeți înainte și înapoi între clasă și :root selector. Dar, mai important, nu vă permite să vă atingeți variabilele CSS, astfel vă împiedică să refolosiți aceleași nume.

De cele mai multe ori, când o pictogramă folosește o singură culoare, eu folosesc --fill-color Nume. Este simplu, ușor de înțeles și are sens să folosiți același nume pentru toate pictogramele care au nevoie doar de o singură culoare de umplere. Dacă trebuie să declar toate variabilele din :root declarație, nu pot avea mai multe --fill-color. Voi fi obligat să definesc --fill-color-1, --fill-color-2sau utilizați spații de nume ca --star-fill-color, --cup-fill-color.

var () implicit

var() funcția, pe care o utilizați pentru a atribui o variabilă CSS unei proprietăți, poate lua o valoare implicită ca un al doilea argument.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">  <symbol id="my-first-icon" viewBox="0 0 20 20">    <title>my-first-icon</title>    <path fill="var(--color-1, red)" d="..." />    <path fill="var(--color-2, blue)" d="..." />    <path fill="var(--color-3, green)" d="..." />  </symbol></svg>

Până când definești --color-1, --color-2 și --color-3, pictograma va utiliza valorile implicite pe care le-ați setat pentru fiecare <paa>. Acest lucru rezolvă problema domeniului global pe care îl avem când using : rădăcină, dar fii mașinăEful: acum aveți o valoare implicită și mergets job. Ca urmare, nu puteți utiliza cainglCompletați declarația pentru a defini pictogramele monocrome. Va trebui să atribuiți culoarea fiecărei variabile CSS utilizate pe pictogramă, una câte una.

Setarea valorilor implicite poate fi utilă, dar este un compromis. Vă sugerez să nu vă faceți un obicei și să o faceți numai atunci când are sens pentru un anumit proiect.

Cât de prietenos este browserul?

Variabilele CSS sunt compatibile cu majoritatea browserelor moderne, dar așa cum probabil vă așteptați, Internet Explorer nu îl acceptă deloc. Nici măcar IE11 și, din moment ce dezvoltarea a fost întreruptă în favoarea Edge, nu există nicio șansă să se ridice vreodată la viteză.

Acum, doar pentru că o caracteristică nu este acceptată de un browser pe care trebuie să îl acceptați, asta nu înseamnă că trebuie să o excludeți cu totul. În astfel de cazuri, alegeți degradare grațioasă: oferă pictograme multicolore browserelor moderne și oferă o culoare de umplere alternativă pentru cele mai vechi.

Ceea ce doriți să faceți este să setați o declarație care va funcționa numai dacă variabilele CSS nu sunt acceptate. Acest lucru poate fi realizat prin setarea fill proprietate pentru culoarea de rezervă: dacă sunt acceptate variabilele CSS, nici măcar nu vor fi luate în considerare. Dacă nu sunt, dvs. fill se va aplica declarația.

Dacă utilizați Sass, acest lucru poate fi abstractizat într-un @mixin.

@mixin icon-colors($fallback: black) {  fill: $fallback;  @content;}

Acum putem defini schemele de culori fără a ne îngrijora de compatibilitatea browserului.

.cup {  @include icon-colors() {    --cup-color: red;    --smoke-color: grey;  };}
.cup-alt {  @include icon-colors(green) {    --cup-color: green;    --smoke-color: grey;  };}

Trecerea variabilelor CSS în mixin prin @content este opțional. Dacă o faceți afară, CSS compilat va fi același. Dar poate fi util să le împachetați într-un singur loc: puteți plia fragmente în editorul dvs. și puteți identifica vizual declarațiile care merg împreună.

Verifică acest stilou pe diferite browsere. În versiunile actualizate de Firefox, Chrome și Safari, ultimele două cupe vor fi, respectiv, roșii cu fum gri și albastru cu fum gri. Pe Internet Explorer și Edge înainte de versiunea 15, cea de-a treia ceașcă va fi roșie, iar a patra va fi albastră! ✨

Dacă doriți să aflați mai multe despre pictogramele simbolului SVG (și SVG în general), eu puternic sugerează să citești totul de Sara Soueidan. Și dacă aveți întrebări despre pictogramele simbol CSS, nu ezitați să mă loviți Stare de nervozitate!

Publicat inițial la frontstuff.io.