Авторский блог Степанова Максима > Графика > Иконка Telegram в векторе, растре, с анимацией и с источниками

Иконка Telegram в векторе, растре, с анимацией и с источниками

Оглавление

Введение

Я очень люблю векторную графику. Вот прям очень люблю. И я, если это уместно, всем и всегда советую переводить любую графику на сайте в вектор. Всё, что выглядит не растрово, и всё, что ещё можно трансформировать в вектор, надо преобразовывать в вектор.

Сегодня я столкнулся с проблемой, что не смог найти иконку Телеграма в векторе. Я искал вот эту:
Телеграм самолётик

Это меня расстроило, вот прям сильно… Я допускаю, что возможно это я плохо искал и не нашёл, но всё же.

И я подумал, что, если в общем доступе нет такой иконки, то её нужно создать. Для этого я придумал несколько условий для этого:

  • В нескольких вариациях;
  • В нескольких форматах;
  • Выложить в общий доступ с источниками для дальнейшей кастомизации пользователями;

# Варианты иконок

Вот какие варианты иконок мне захотелось сделать в итоге.

  • Телеграм самолётик
  • Цифровое сопротивление

В нижеследующих разделах вы найдёте эти иконки в следующих форматах: AI, PNG, JPG, GIF, шрифтовая иконка, SVG спрайт

В формате GIF я немножко анимировал каждую из иконок.

# Шрифтовые иконки

Это достаточно удобный формат для создания иконок. С их помощью можно создавать достаточно сложные ховер-эффекты, т.к. в шрифтовой иконке нам доступны все её слои для изменения цвета в каждом. Для наглядности я добавил каждой шрифтовой иконке свой рандомный ховер-эффект с цветом.

Иконка #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 с источниками

Здесь можно скачать иконки в разных форматах и с сорсами. Берите, изменяйте, заливайте на свои сайты.