Иконка для мессенджера Telegram в векторе

Я очень люблю векторную графику и всегда, когда подворачивается случай, использую её по назначению. Особенно в шрифтовых иконках, что в последнее время стало очень популярным. Надеюсь, никто не станет спорить, что в вопросе иконок вектор гораздо круче растра. Вот и сейчас у меня возникла задача создания иконка Telegram  для шрифтовых иконок.

Дабы не тратить время на её создание, я решил поискать готовый вариант в SVG или AI форматах, но к великому своему удивлению не нашёл оных. Иконки сами по себе есть и в нужных форматах, и совершенно разные, но среди них нужной для меня не было.

Вот, что мне удалось найти:

Иконка Telegram

Иконка Telegram

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

По ссылке далее вы можете взять себе уже готовую иконку для импорта в шрифт в svg-формате. А вот по этой ссылке вы можете взять себе уже готовый набор для сервиса Fontello.

 

UPD — 28.11.2016

 

Новый метод

Хочу отметить, что гораздо удобнее подключать на сайт иконки через svg спрайт, а не через шрифт или через svg файлы. Метод создания очень прост — создаёте или находите нужную иконку в svg формате (найти можно, например, на очень содержательном сайте — www.flaticon.com), и грузите ее на https://icomoon.io/app/#/select.

 

Эту иконку я нарисовал сам и залил её на icomoon. Вот что у меня получилось:

HTML вывода иконки

 

<svg class="icon icon-telegram">
    <use xlink:href="#icon-telegram">
    </use>
</svg>

 

Содержание svg файла

 

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="icon-telegram" viewBox="0 0 32 32">
            <path class="path1" d="M29.638 2.522l-28.397 11.136c0 0-1.344 0.461-1.235 1.306 0.109 0.851 1.203 1.235 1.203 1.235l7.142 2.406 17.152-10.893c0 0 0.992-0.602 0.954 0 0 0 0.179 0.109-0.352 0.602s-13.523 12.262-13.523 12.262l-0.883 7.814c0.397 0.173 0.755-0.102 0.755-0.102l4.64-4.23 7.168 5.536c1.946 0.851 2.65-0.922 2.65-0.922l5.056-25.498c0.006-1.677-2.33-0.653-2.33-0.653z"></path>
        </symbol>
    </defs>
</svg>

 

Чтобы применить иконку на сайте, надо взять содержание svg файла и вставить куда-нибудь сразу после body. А чтобы вывести иконку в нужном месте, нужно взять код вывода иконки и вставить туда, куда нужно. И всё.

Прекрасным свойством является то, что вы можете перекрашивать иконку по ховеру или в статичном положении, добавив svg селектору свойство fill.