Geomicons - унікальний SVG Iconset

Веб-іконки швидко стають нормою для сучасного веб-дизайну. Вони масові активи для веб-дизайнерів, як ці іконки можна налаштувати за допомогою CSS і зміна розмірів без втрати якості.

Але деякі пакети іконок можуть відчувати себе роздутими і занадто великими для невеликих сайтів. Ось де Geomicons дійсно сяє.

Це користувальницький пакет іконок, що кодуються вручну, працює на SVG. Іконки можна вбудовувати за допомогою скриптів JS або як прямі файли SVG на сторінці. У будь-якому випадку, вони красиві вектори та супер легкий до restyle.

Основна сторінка 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, вам, ймовірно, ніколи не доведеться використовувати будь-які фрагменти вузла. Те ж саме стосується версії цих піктограм React.js.

Досі підтримка основних рамок - справа велика. Це більше доказів того, що Geomicons призначені підтримувати будь-який тип веб-сайту в першу чергу зосереджуючись на продуктивності.

Щоб дати цим піктограм тестовий запуск, ви можете витягти копію через npm або завантажити їх безпосередньо через GitHub.

Існує також набір іконок з назвою Geomicons Wired, який також можна перевірити.

У будь-якому випадку, це a блискучий набір іконок для мінімалістських веб-дизайнерів. Ідеальний вибір для оптимізації свого сайту за допомогою красивих значків, зменшуючи загальний час завантаження сторінки.