Иконка Telegram в векторе, растре, с анимацией и с источниками
Введение
Я очень люблю векторную графику. Вот прям очень люблю. И я, если это уместно, всем и всегда советую переводить любую графику на сайте в вектор. Всё, что выглядит не растрово, и всё, что ещё можно трансформировать в вектор, надо преобразовывать в вектор.
Сегодня я столкнулся с проблемой, что не смог найти иконку Телеграма в векторе. Я искал вот эту:
Это меня расстроило, вот прям сильно… Я допускаю, что возможно это я плохо искал и не нашёл, но всё же.
И я подумал, что, если в общем доступе нет такой иконки, то её нужно создать. Для этого я придумал несколько условий для этого:
- В нескольких вариациях;
- В нескольких форматах;
- Выложить в общий доступ с источниками для дальнейшей кастомизации пользователями;
# Варианты иконок
Вот какие варианты иконок мне захотелось сделать в итоге.
В нижеследующих разделах вы найдёте эти иконки в следующих форматах: AI, PNG, JPG, GIF, шрифтовая иконка, SVG спрайт
# Шрифтовые иконки
Это достаточно удобный формат для создания иконок. С их помощью можно создавать достаточно сложные ховер-эффекты, т.к. в шрифтовой иконке нам доступны все её слои для изменения цвета в каждом. Для наглядности я добавил каждой шрифтовой иконке свой рандомный ховер-эффект с цветом.
Иконка #1
<span class="icon-1">
</span>
.icon-1:before {
content: "\e90b";
color: #6faeec;
}
.icon-1:hover:before {
color: #2379cf;
}
Иконка #2
<span class="icon-2">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
</span>
.icon-2 .path1:before {
content: "\e90c";
color: rgb(35, 121, 207);
}
.icon-2:hover .path1:before {
color: #6faeec;
}
.icon-2 .path2:before {
content: "\e90d";
margin-left: -1em;
color: rgb(255, 255, 255);
}
.icon-2 .path3:before {
content: "\e90e";
margin-left: -1em;
color: rgb(35, 121, 207);
}
.icon-2:hover .path3:before {
color: #6faeec;
}
.icon-2 .path4:before {
content: "\e90f";
margin-left: -1em;
color: rgb(255, 255, 255);
}
Иконка #3
<span class="icon-3">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
</span>
.icon-3 .path1:before {
content: "\e907";
color: rgb(80, 177, 223);
}
.icon-3:hover .path1:before {
color: #2379CF;
}
.icon-3 .path2:before {
content: "\e908";
margin-left: -1em;
color: rgb(255, 255, 255);
}
.icon-3 .path3:before {
content: "\e909";
margin-left: -1em;
color: rgb(209, 227, 239);
}
.icon-3 .path4:before {
content: "\e90a";
margin-left: -1em;
color: rgb(182, 204, 221);
}
Иконка #4
<span class="icon-4">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
<span class="path5"></span>
<span class="path6"></span>
<span class="path7"></span>
</span>
.icon-4 .path1:before {
content: "\e900";
color: rgb(0, 0, 0);
}
.icon-4 .path2:before {
content: "\e901";
margin-left: -1em;
color: rgb(255, 255, 255);
}
.icon-4 .path3:before {
content: "\e902";
margin-left: -1em;
color: rgb(0, 0, 0);
}
.icon-4 .path4:before {
content: "\e903";
margin-left: -1em;
color: rgb(0, 0, 0);
opacity: 0.75;
}
.icon-4 .path5:before {
content: "\e904";
margin-left: -1em;
color: rgb(61, 64, 69);
}
.icon-4:hover .path5:before {
color: #2379CF;
}
.icon-4 .path6:before {
content: "\e905";
margin-left: -1em;
color: rgb(0, 0, 0);
opacity: 0.15;
}
.icon-4 .path7:before {
content: "\e906";
margin-left: -1em;
color: rgb(64, 67, 71);
opacity: 0.1;
}
# SVG спрайты
Хочу отметить, что не менее удобно подключать на сайт иконки через svg спрайт, а не через шрифт или через svg файлы. Метод создания очень прост: — создаёте или находите нужную иконку в svg формате (найти можно, например, на очень содержательном сайте — flaticon), и грузите ее на сайт icomoon.
Эту иконку я нарисовал сам и залил её на icomoon. Вот что у меня получилось:
Чтобы применить иконку на сайте, надо взять содержание svg файла и вставить куда-нибудь сразу после body. А чтобы вывести иконку в нужном месте, нужно взять код вывода иконки и вставить туда, куда нужно. И всё.
Прекрасным свойством является то, что вы можете перекрашивать иконку по ховеру или в статичном положении, добавив svg селектору свойство fill.
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, JPG и PNG с источниками
Здесь можно скачать иконки в разных форматах и с сорсами. Берите, изменяйте, заливайте на свои сайты.