Geomicons - Un Iconset SVG codat manual

Iconitele web devin rapid normele pentru designul web modern. Ele sunt materiale masive pentru designerii de web ca acestea icoanele pot fi personalizate prin CSS și redimensionate fără nici o pierdere de calitate.

Dar unele pachete de pictograme se pot simți umflate și prea mari pentru site-uri mai mici. Aici Geomicons straluceste.

Acesta este un personalizat pachet de pictograme codificat manual care rulează pe SVG. Puteți încorpora pictogramele prin intermediul scripturilor JS sau ca fișiere SVG directe în pagina dvs. Oricum, sunt niște vectori frumoși și foarte ușor de restabilit.

Pagina principală Geomicons oferă o demonstrație completă a tuturor pictogramelor. Ele sunt destul de simple și urmează tradiționalul stil de design cu o singură culoare, cu care suntem cu toții familiarizați.

Dar informațiile despre instalarea lor lipsesc cu siguranță pe pagina demo. Dacă doriți să aflați cum să setați acest lucru, va trebui să vizitați repo GitHub pentru instrucțiuni.

Implicit, acest lucru biblioteca presupune că lucrați cu CSS / JS pentru a avea aceste icoane încorporate direct în elementele paginii. Cu toate acestea, atunci când descărcați pictogramele de la GitHub veți obține toate fișierele SVG brute pe care le puteți adăuga direct în HTML.

Numai probleme este asta graficele SVG necesită mai multe editări pentru a schimba culorile, în timp ce ruta JS / CSS vă oferă controlul asupra culorilor prin intermediul codului.

Pur și simplu adăugați geomicons.min.js script în antetul dvs. și treceți date-icon atribut în elemente HTML. Acestea vor introduce automat icoane pe care le puteți apoi manipula folosind clase CSS.

Un alt lucru care-mi place cu adevărat de Geomicons este suportul pentru Node. Iată un fragment de probă din repo GitHub:

var geomicons = necesită ('geomicons-open'); var pathData = geomicons.paths.heart; // Returnează valoarea atributului d al trasei var svgString = geomicons.toString ('inima'); // Returnează un șir SVG

Dacă nu sunteți familiarizat cu Nodul, probabil că nu va trebui niciodată să utilizați niciun fragment de noduri. Același lucru este valabil și pentru versiunea React.js a acestor pictograme.

Încă sprijinul acordat cadrelor importante este o afacere importantă. Este mai multă dovadă că Geomicons sunt meniți suport orice tip de site web concentrându-se mai întâi pe performanță.

Pentru a da acestor pictograme un test de testare poți trage o copie prin npm sau le poți descărca direct prin GitHub.

Există, de asemenea, un set de pictograme denumit Geomicons Wired, care ar putea să încercați, de asemenea.

Oricum, este vorba despre a genial de icon-uri pentru designeri web minimalisti. O alegere perfectă pentru optimizarea site-ului dvs. cu pictograme frumoase, în timp ce reduceți timpul total de încărcare a paginilor.