Geomicons - Unikalny zestaw ikon SVG z kodowaniem ręcznym

Zestawy ikon internetowych szybko stają się normą dla nowoczesnego projektowania stron internetowych. To ogromne zasoby dla projektantów stron internetowych ikony można dostosować za pomocą CSS i zmieniono rozmiar bez utraty jakości.

Jednak niektóre pakiety ikon mogą wydawać się nadęte i zbyt duże dla mniejszych witryn. To tam Geomikony naprawdę świecą.

To jest niestandardowy ręcznie kodowany zestaw ikon na SVG. Możesz osadzać ikony w skryptach JS lub jako bezpośrednie pliki SVG na swojej stronie. Tak czy inaczej, są piękne wektory i super łatwe do zmiany stylu.

Główna strona Geomicons zawiera pełną prezentację wszystkich ikon. Są dość proste i są zgodne z tradycyjnym, jednokolorowym, płaskim stylem, który wszyscy znamy.

Ale na stronie demonstracyjnej z pewnością brakuje informacji o ich ustawieniach. Jeśli chcesz dowiedzieć się, jak to ustawić, musisz odwiedzić repozytorium GitHub, aby uzyskać instrukcje.

Domyślnie to biblioteka zakłada, że ​​pracujesz z CSS / JS aby te ikony były osadzone bezpośrednio w elementach strony. Jednak po pobraniu ikon z GitHub otrzymasz wszystkie surowe pliki SVG, które możesz dodać bezpośrednio do HTML.

Jedynym problemem jest to surowe SVG wymagają więcej edycji zmienić kolory, podczas gdy trasa JS / CSS daje kontrolę nad kolorami za pomocą kodu.

Po prostu dodaj geomicons.min.js skryptu do nagłówka i przekazać ikona danych atrybut do elementów HTML. Będą one automatycznie osadzać ikony, które można następnie manipulować za pomocą klas CSS.

Inną rzeczą, którą bardzo lubię w Geomicons, jest obsługa węzła. Oto przykładowy fragment z repozytorium GitHub:

var geomicons = require („geomicons-open”); var pathData = geomicons.paths.heart; // Zwraca wartość atrybutu d ścieżki var svgString = geomicons.toString ('heart'); // Zwraca łańcuch SVG

Jeśli nie jesteś zaznajomiony z węzłem, prawdopodobnie nigdy nie będziesz musiał używać fragmentów węzłów. To samo dotyczy wersji ikon React.js.

Nadal posiadanie wsparcia dla głównych frameworków to wielka sprawa. To więcej dowodów na to, że Geomikony są przeznaczone wspierać dowolny typ strony internetowej skupiając się przede wszystkim na wydajności.

Aby nadać tym ikonom przebieg testowy, możesz pobrać kopię przez npm lub pobrać je bezpośrednio za pomocą GitHub.

Istnieje również zarysowy zestaw ikon o nazwie Geomicons Wired, który możesz również przetestować.

Tak czy inaczej, to jest genialny zestaw ikon dla minimalistycznych projektantów stron internetowych. Idealny wybór do optymalizacji witryny za pomocą pięknych ikon przy jednoczesnym zmniejszeniu całkowitego czasu ładowania strony.