Geomicons - уникален ръчно кодиран SVG Iconset

Уеб иконите бързо се превръщат в норма за модерен уеб дизайн. Те са огромни активи за уеб дизайнерите иконите могат да бъдат персонализирани чрез CSS и преоразмеряват без загуба на качество.

Но някои пакети с икони могат да се почувстват подути и твърде големи за по-малките сайтове. Това е мястото, където Geomicons наистина блести.

Това е персонализиран ръчно кодиран пакет от икони, работещ на SVG. Можете да вградите иконите чрез JS скриптове или като директни SVG файлове в страницата си. Така или иначе, те са красиви вектори и супер лесни за рестайлинг.

Основната страница на Geomicons разполага с пълна демонстрация на всички икони. Те са доста прости и следват традиционния едноцветен плосък дизайн, с който всички сме запознати.

Но информацията за настройката им определено липсва на демо страницата. Ако искате да научите как да настроите това, ще трябва да посетите GitHub repo за инструкции.

По подразбиране това библиотеката предполага, че работите с CSS / JS тези икони да бъдат вградени директно в елементите на страницата. Но когато изтеглите иконите от GitHub, получавате всички сурови SVG файлове, които можете да добавите директно в HTML.

Това е само проблем суровите SVG изискват повече редактиране за да промените цветовете, докато JS / CSS маршрутът ви дава контрол върху цветовете чрез кода.

Просто добавете geomicons.min.js скрипт в заглавната си част и предаване на данни икона атрибут в HTML елементи. Те ще включат автоматично икони, които след това можете да манипулирате с помощта на CSS класове.

Друго нещо, което ми харесва в Geomicons е подкрепата за Node. Ето примерен фрагмент от репо GitHub:

var geomicons = require ("geomicons-open"); var pathData = geomicons.paths.heart; / / Връща стойността на атрибута d на пътя var svgString = geomicons.toString ('heart'); // Връща SVG низ

Ако не сте запознати с Node, вероятно никога няма да се наложи да използвате някой от фрагментите на Node. Същото важи и за версията React.js на тези икони.

Все още подкрепата за основните рамки е голяма работа. Това е повече доказателство, че Geomicons са предназначени поддръжка на всякакъв вид уебсайт като се съсредоточи първо върху изпълнението.

За да дадете на тези икони пробен тест, можете да изтеглите копие през npm или да ги изтеглите директно през GitHub.

Също така има и икона, наречена Geomicons Wired, която може да искате да тествате.

Така или иначе, това е брилянтен икони за минималистични уеб дизайнери. Перфектен избор за оптимизиране на сайта Ви с красиви икони, като същевременно намалявате общото време за зареждане на страницата.