Навигатор по бесплатным иконкам

    Вчера в который раз возник вопрос по подбору нескольких иконок в очередном веб-проекте. В основном пользуюсь готовыми иконками из бесплатных наборов. До недавнего времени прибегал к услугам сайта iconpicker.deviantech.ru. Навигация по иконкам была хоть и не самая удобная, но явно лучше, чем просто проглядывать их в Finder'е (или Explorer'е). Однако в последнее время сайт недоступен.

    В итоге решил сделать собственный навигатор по иконкам:




    Навигатор представляет собой HTML-страницу с JavaScript-кодом. То есть он прекрасно работает будучи открытым с локального диска. Но для удобства и демонстрации выложил и онлайн на GitHub'е — sibprogrammer.github.com/icons-explorer

    По сути интерфейс позволяет просматривать весь список иконок из нескольких наборов (нужно когда не знаешь, что ищешь) и позволяет фильтровать набор по ключевому слову, оставляя на странице только те, что удовлетворяют критерию (когда примерно знаешь как называется то, что ищешь).

    Исходники расположены по адресу — github.com/sibprogrammer/icons-explorer Для регулярного просмотра проще скачать архив и открывать index.html для поиска иконок (GitHub Pages все-таки довольно медлено отвечает на тысячи реквестов :))

    Идея навигатора зрела давно, а неработающий сайт iconpicker.deviantech.ru лишь ускорил процесс. На практике оказалось, что манипулировать 7 с лишним тысячами иконок даже Google Chrome'у довольно тяжко. При открытии страницы загружаются только те иконки, что видны в данный момент. Для этого используется плагин для jQuery LazyLoad. К сожалению его производительность на таких объемах оказалась недостаточной и пришлось потратить некоторое время на улучшения в плане скорости. В результате скроллинг страницы перестал перманентно тормозить, а лишь переодически задумываться. Хотя системные требования к клиенту все-таки довольно высокие. Заметно улучшить ситуацию могли бы спрайты, но их генерация — это отдельный вопрос, который был отложен на будущее.

    Навигатор делался в первую очередь с целью удовлетворить собственные нужны. Но, думаю, будет полезен и другим разработчикам.
    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 37
    • +15
      > 7 с лишним тысячами иконок
      А зачем их все выводить на одну страницу?
      • 0
        Выводить — не проблема. Проблема — манипулировать таким количеством. Хотелось, чтобы странича работала и локально, а это накладывает ограничения на то, как организовать поиск. В любом случае, если есть реальные идеи по оптимизации — форкайте проект на гитхабе и предлагайте. Буду рад замержить улучшения :)
        • +5
          Ну да, не «проблема». Гитхаб и так ддосят. Объединили бы в спрайт, грузилось бы быстрее.
          • 0
            И потерять возможность перетаскивать нужные иконки на диск?!
            • +1
              Можно оставить _ссылку_ на саму иконку.
        • 0
          7 тыщ иконок это мелочи. Вот когда их ~70 ГБ архивов…
        • –1
          Первая здравая мысль, которая приходит в голову, это:
          т.к. у вас в массиве содержаться теги, то осуществляем поиск по ним и выводим нужные изображения, т.е. выводим изображения только по требованию…

          и переменные с 100500 тегами думаю лучше скинуть в отдельный JS файл и загружать после полной загрузки страницы…

          При первом старте стрницы, можно показать лишь некоторые избранные иображения либо просто ничего :)
          • +1
            В этом моменте еще бы было не плохо проверять есть ли такое изображение на диске:
            Например такого нет http://sibprogrammer.github.com/icons-explorer/icons/fatcow/16x16/file_extension.png.png
            • +1
              Выводить иконки только по требованию — не удобно будет в случае «ищу то, не знаю что».
              • +1
                ну тогда можно сделать постранично, либо подгружать по скролу (скролишь вниз а тебе иконки подгружаются) — типа как новости Вконтакте…
                • 0
                  Иконки и подгружаются, только когда становятся видимыми. Сразу после загрузки страницы вместо иконок вставлены заглушки. Сейчас основные тормоза дает плагин lazyload. Если его убрать, то страничка работает очень шустро (но тогда плохо становится веб-серверу :)). Сейчас работает компромисный вариант с немного подтюнненым lazyload'ом.
            • +1
            • +1
              Много иконок = клево! Но объясните мне преимущества данного способа поиска иконок перед гугловским поиском картинок с выбранной опцией «icon».
              • +2
                Гугл умеет фильтровать по типу лицензии?
                • 0
                  Сколько раз искал иконки в гугле, всегда попадал на подобные хранилища. Ни разу не встречал никаких лицензий.
                  • +5
                    Да-да, гугл — он такой, всегда можно найти в нём не только иконки, но и музыку, фильмы и софт, и никаких лицензий :)
              • +2
                Простите, вы сделали что?
                • 0
                  Спасибо вам большое. Реально это удобнее чем искать в четрыех папках.
                  До сих пор я открывал страничку fugue-icons-src.googlecode.com/svn/trunk/all-preview.png искал что нужно глазами потом название иконки набирал и копировал в нужню папку файлик.
                  Совмещение возможности искать глазами и по названию среди бесплатных нормальных наборов иконок это круто.
                  Спасибо еще раз!
                  • +3
                    Искал по словам «ok», «ship», «view» — получил кучу мусора.
                    А всего лишь хотел найти нормальный зеленый чекмарк, иконку отправления груза и иконку просмотра записи.
                    Остаюсь на iconfinder.
                    • 0
                      Заходим в www.iconfinder.com, пишем ключевое слово, находим иконки, выбираем «Allowed for commercial use» или еще лучше «Allowed for commercial use (No link required)» и все.
                      • 0
                        iconizer.net например, тоже можно выбирать лицензию. В общем, выбор есть.
                        • 0
                          А ваш сервис мощно загрузил мне процессор (браузер Opera).
                          • 0
                            я тоже пользовалась iconpicker.deviantech.ru и с его закрытием стало нехватать удобного поиска по сетам иконок.
                            www.iconfinder.com/ не дает возможности искать по famfam или fatcow, а в одном проекте хочется использовать иконки из одного сета, нарисованные в едином стиле.

                            большое спасибо
                          • 0
                            Открытие вашего сайта подвешивает лису на пару минут. С этим определенно стоит что-то делать…
                            Зачем выводить сразу все иконки? Все равно никто не будет просматривать тысячи иконок по порядку. Либо фильтр введут, либо выберут определенный пак. Нет?
                            • 0
                              Ох, наш iconpicker.deviantech.ru действительно недоступен. Извиняюсь, исправим.
                              • 0
                                В README.md добавь workflow по добавлению нового сета.
                                • +1
                                  А ещё было бы круто (и не очень обременительно, я надеюсь) сохранять поисковый запрос в адресе.
                                  Что-то типа
                                  sibprogrammer.github.com/icons-explorer/#search=check
                                  чтобы получалось при вводе в поиск.

                                  Тогда можно было бы делиться ссылкой с товарищем. Вот господин deniamnet спрашивал про галочки, например.
                                • 0
                                  Эм, а iconpicker, если я не путаю ничего открыто-исходниковый…

                                  Соответственно вопрос — зачем было делать свой аналог с более плохим (ИМХО) интерфейсом и аналогичным функционалом, нежели поднять еще одну версию iconpicker-а для всеобщего пользования?
                                  • 0
                                    Несколько причин: сервис не работал, репозиторий автора изчез с github'а. Плюс, насколько помнил, то сервис был реализован в виде приложения на рельсах. Мне же хотелось простую html-страницу по определенному icon set'у с возможностью поиска, которую открыть можно было бы локально.
                                  • 0
                                    Прикольно, сюда попали 2 моих набора — Led и FatCow.

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.