Geomicons - уникальный набор иконок SVG с ручной кодировкой
Наборы веб-иконок быстро становятся нормой для современного веб-дизайна. Они являются огромным активом для веб-дизайнеров, так как они иконки могут быть настроены с помощью CSS и изменил размеры без потери качества.
Но некоторые пакеты значков могут показаться раздутыми и слишком большими для небольших сайтов. Вот где Geomicons действительно сияет.
Это пользовательский набор иконок с ручной кодировкой, работающий на SVG. Вы можете встраивать иконки через JS-скрипты или как прямые SVG-файлы на свою страницу. В любом случае, они красивые векторы и супер легко перестраиваются.
На главной странице Geomicons представлена полная демонстрация всех иконок. Они довольно просты и следуют традиционному стилю одноцветного плоского дизайна, с которым мы все знакомы.
Но их информация об установке определенно отсутствует на демонстрационной странице. Если вы хотите узнать, как это настроить, вам нужно посетить репозиторий GitHub для получения инструкций.
По умолчанию это библиотека предполагает, что вы работаете с 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, которые вы также можете попробовать.
В любом случае, это блестящий набор иконок для минималистских веб-дизайнеров. Идеальный выбор для оптимизации вашего сайта с красивыми иконками при уменьшении общего времени загрузки страницы.
