Расскажу о своем проекте, работу над которым закончил несколько дней назад — библиотека иконок криптовалют для дизайнеров и разработчиков.
Как родилась идея?
Основной мой профиль – дизайн сайтов и мобильных приложений, у меня было много клиентов с блокчейн проектами, и почти каждый из них сталкивался с проблемой подбора иконок криптовалют.
Некоторые клиенты брали иконки с CoinMarketCap, тут есть ряд минусов:
– Иконки там в .png и маленького размера;
– Отсутсвие возможности для кастомизации;
– Ручная работа с каждой иконкой, так как файл иконки не соответствует названию криптовалюты;
– Вес иконки больше векторного аналога.
Другие находили сеты иконок в интернете, вариант тоже не без минусов:
– Чаще всего попадаются очень ограниченные сеты иконок на 100-150 штук;
– Очень много неактуальных, устаревших иконок;
– Сложная ручная кастомизация каждой иконки.
– После поиска очередного сета иконок для проекта я решил создать свой набор.
Набор иконок
Главное преимущество моего набора – легкая кастомизация иконок под стиль проекта как в фигме, так и при подключении к проекту в CSS.
Все иконки отрисованы в векторе, именуются и вызываются по тикеру.
Набор содержит топ 600 иконок с CoinMarketCap и все коины с Binance.
Дизайнерам
Все иконки я упаковал в компонент Фигмы, сделал несколько пресетов, вот так это выглядит:
Компонент меняет размер без косяков, каждая иконка расположена строго по центру и растягивается вместе с компонентом. В фигме кроме иконок содержится библиотека цветов, в которой есть цвет каждой отрисованной иконки. Дизайнеру вместе с файлом фигмы отдается папка со всеми иконками в svg.
Для разработчиков
Все иконки – в Webfont, получился аналог FontAwesome, но с иконками криптовалют. Для вывода иконки в своем проекте нужно подключить шрифт и файл стилей, а потом вызвать нужную иконку:
<span class="cryptoicon icon-USDT"></span>
для разработчиков тоже сделал несколько пресетов: белая иконка на черном фоне, черная иконка на белом фоне, иконка своего оригинального цвета на белом фоне, фон цвета оригинальной иконки и белая иконка:
Вместе с иконками в css файле в виде переменных содержится оригинальный цвет каждого отрисованного коина, цвет можно применить к любому элементу и его фону:
<span class="USDT-color-bg"></span>
Код выше применит к элементу <span> фон цвета иконки USDT. А вот так задается цвет элемента:
<span class="USDT-color"></span>
Есть и другие варианты подключения и использования иконок. Можно подключить svg-спрайт со всеми иконками и вызывать иконки таким способом:
<svg><use xlink:href="cryptosymbol.svg#icon-USDT"></use></svg>
Можно использовать svg штучно, в папке с svg иконками все иконки именуются по тикеру.
Монетизация
Есть три варианта покупки набора:
– Полный набор (svg, svg-спрайт, webfont, Figma) – 20$
– Набор дизайнера (svg, Figma) – 12$
– Набор разработчика (svg, svg-спрайт, webfont) – 12$
Разовая покупка, подписок нет. Вышла новая версия – можно купить еще раз или использовать старую, если ее хватает. В данный момент автоматизированно купить набор можно за USDT, LTC, ETH, BTC, возникли сложности с подключением карточного процессинга и получения оплат из-за рубежа. Бесплатно можно скачать весь набор иконок в png, большого размера и прозрачные.
Поддержка
На сайте разместил почту, будем добавлять иконки по мере запросов от пользователей.
Команда
Над проектом работаю с супругой, она отрисовала большую часть иконок, а я сделал сайт, упаковал иконки в шрифт, svg-спрайт.
Посмотреть проект и бесплатно скачать весь набор иконок в png можно тут – https://cryptoicons.net/
Буду очень благодарен за советы и идеи в плане продвижения, за обратную связь по продукту. Спасибо за внимание.