Add telegram icon (#199)

* Add telegram icon * Add telegram to COPY-TO-ROOT-SASS/abridge.scss * Update _functions.scss used https://yqnn.github.io/svg-path-editor/ to create a lighter weight icon --------- Co-authored-by: Jake G <106644+Jieiku@users.noreply.github.com>
Jieiku · Aug 11, 2024 · f756ad1 · f756ad1
1 parent 1da9c7e
commit f756ad1
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 1 deletion.
diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss
@@ -46,6 +46,7 @@
   $icon-youtube: false,
   $icon-peertube: false,
   $icon-researchgate: false,
+  $icon-telegram: false,
 
   //$icon-x: true,// x symbol, used to close search results page.
   //$icon-search: true,//search, spyglass search button in search box.

diff --git a/config.toml b/config.toml
@@ -190,6 +190,7 @@ twitch = "your-user-name"
 youtube = "channel/your-channel-id"
 #peertube = "https://peertube.example.com/@username"
 #researchgate = "your-profile-id"
+#telegram = "your-user-name"
 
 
 ###############################################################################

diff --git a/sass/_functions.scss b/sass/_functions.scss
@@ -65,6 +65,7 @@
  * SVG Icons
  * https://github.com/feathericons/feather
  * https://github.com/tabler/tabler-icons/find/master
+ * https://github.com/twbs/icons
  *
  * https://yqnn.github.io/svg-path-editor/
  * https://jakearchibald.github.io/svgomg/
@@ -132,7 +133,8 @@
     copy: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{getColor($ic,$stroke,1)}' stroke-width='#{$stroke-width}' fill='#{getColor($ic,$fill,1)}' viewBox='0 0 24 24'%3E%3Cpath d='M11 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM7 9H3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E",
     copy-yes: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{getColor($ic,$stroke,1)}' stroke-width='#{$stroke-width}' fill='#{getColor($ic,$fill,1)}' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E",
     copy-err: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{getColor($ic,$stroke,1)}' stroke-width='#{$stroke-width}' fill='#{getColor($ic,$fill,1)}' viewBox='0 0 24 24'%3E%3Cpath d='M1 12a1 1 0 0 0 22 0 1 1 0 0 0-22 0m11-7v9m0 5v-2'/%3E%3C/svg%3E",
-    search: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{getColor($ic,$stroke,1)}' stroke-width='#{$stroke-width}' fill='#{getColor($ic,$fill,1)}' viewBox='0 0 24 24'%3E%3Ccircle cx='9.5' cy='9.5' r='8'/%3E%3Cpath d='m23 23-9-9'/%3E%3C/svg%3E"
+    search: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{getColor($ic,$stroke,1)}' stroke-width='#{$stroke-width}' fill='#{getColor($ic,$fill,1)}' viewBox='0 0 24 24'%3E%3Ccircle cx='9.5' cy='9.5' r='8'/%3E%3Cpath d='m23 23-9-9'/%3E%3C/svg%3E",
+    telegram: "<svg xmlns='http://www.w3.org/2000/svg' fill='#{getColor($ic,$fill,1)}' viewBox='0 0 24 24'%3E%3Cpath d='M24 12a12 12 0 0 0-24 0 12 12 0 0 0 24 0M5.2 12l7.9-3.4 3.2-1.3c.3-.1 1.3-.4 1.3.7l-.6 4-.9 5.2s-.1.7-.6.8c-.7.2-1.3-.4-1.5-.5l-3.5-2.4c-.3-.2-.5-.6 0-1.1l3.4-3.3c.5-.4.9-1.4-.7-.2l-4.5 3s-.6.4-1.8.1l-2.2-.7c-.2-.1-.4-.5.5-.9Z'/%3E%3C/svg%3E"
   );
   $icon: map-get($icons, $name);
   @return url("data:image/svg+xml,#{$icon}");

diff --git a/sass/abridge.scss b/sass/abridge.scss
@@ -64,6 +64,7 @@ $icon-twitch: true !default;
 $icon-youtube: true !default;
 $icon-peertube: false !default;
 $icon-researchgate: false !default;
+$icon-telegram: false !default;
 
 $icon-x: true !default;// x symbol, used to close search results page.
 $icon-search: true !default;//search, spyglass search button in search box.
@@ -1374,6 +1375,7 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   @if $icon-twitter {       .twitter {        background-image: functions.icon(twitter,         $ic,2, "%232ad", "none") }}
   @if $icon-x {             .x {              background-image: functions.icon(x,               $ic,3, "%23f00", "none") }}
   @if $icon-youtube {       .youtube {        background-image: functions.icon(youtube,         $ic,2, "none", ["%23f00","%23fff"]) }}
+  @if $icon-telegram {      .telegram {       background-image: functions.icon(telegram,        $ic,0, "none", "%233ad") }}
   .svg {
     width: 1.8rem;
     height: 1.8rem;

diff --git a/templates/partials/social.html b/templates/partials/social.html
@@ -67,6 +67,8 @@
           <a href="https://www.buymeacoffee.com/{{ config.extra.buymeacoffee }}/" target="_blank" title="Buy Me A Coffee"><i type="Button" class="svg buymeacoffee" title="Buy Me A Coffee"></i></a>{% endif -%}
           {%- if config.extra.github_sponsor -%}
           <a href="https://github.com/sponsors/{{ config.extra.github_sponsor }}/" target="_blank" title="GitHub Sponsor"><i type="Button" class="svg github-sponsor" title="GitHub Sponsor"></i></a>{% endif -%}
+          {%- if config.extra.telegram -%}
+          <a href="https://t.me/{{ config.extra.telegram }}/" target="_blank" title="Telegram"><i type="Button" class="svg telegram" title="Telegram"></i></a>{% endif -%}
       </div></nav>