From 848289cdc0a7e65cdd5cfecda9e680c9d721ccc2 Mon Sep 17 00:00:00 2001
From: samuel-p <codes@samuel-philipp.de>
Date: Wed, 9 Jun 2021 00:58:35 +0200
Subject: [PATCH] replaced some more icons with svg some more improvements

---
 src/_data/services.json              | 22 +++++++++++-----------
 src/_includes/layouts/base.njk       |  4 ++--
 src/_includes/services-extended.html |  6 +-----
 src/_includes/services-simple.html   |  6 +-----
 src/de/all-donations.html            |  2 +-
 src/de/blog.md                       |  2 +-
 src/de/contact.html                  |  4 ++--
 src/de/donate.html                   |  6 +++---
 src/de/index.html                    |  2 +-
 src/de/services.html                 |  4 ++--
 src/en/all-donations.html            |  2 +-
 src/en/blog.md                       |  2 +-
 src/en/contact.html                  |  4 ++--
 src/en/donate.html                   |  6 +++---
 src/en/index.html                    |  2 +-
 src/en/services.html                 |  4 ++--
 src/img/icon/bars.svg                |  1 +
 src/img/icon/book.svg                |  1 +
 src/img/icon/comment-dots.svg        |  1 +
 src/img/icon/hand-holding-heart.svg  |  1 +
 src/img/icon/home.svg                |  1 +
 src/img/icon/server.svg              |  1 +
 src/scss/icons.scss                  |  6 ++++++
 23 files changed, 47 insertions(+), 43 deletions(-)
 create mode 100644 src/img/icon/bars.svg
 create mode 100644 src/img/icon/book.svg
 create mode 100644 src/img/icon/comment-dots.svg
 create mode 100644 src/img/icon/hand-holding-heart.svg
 create mode 100644 src/img/icon/home.svg
 create mode 100644 src/img/icon/server.svg

diff --git a/src/_data/services.json b/src/_data/services.json
index 937cae3..4021de7 100644
--- a/src/_data/services.json
+++ b/src/_data/services.json
@@ -2,7 +2,7 @@
   {
     "id": "searx",
     "name": "Searx",
-    "si": "search",
+    "icon": "si si-search",
     "url": "https://searx.sp-codes.de",
     "status": "https://searx.sp-codes.de",
     "summary": {
@@ -13,7 +13,7 @@
   {
     "id": "matrix",
     "name": "Matrix",
-    "si": "comments",
+    "icon": "si si-comments",
     "url": "https://chat.sp-codes.de",
     "status": "https://matrix.sp-codes.de/_matrix/static/",
     "summary": {
@@ -24,7 +24,7 @@
   {
     "id": "jitsi",
     "name": "Jitsi Meet",
-    "si": "users",
+    "icon": "si si-users",
     "url": "https://jitsi.sp-codes.de",
     "status": "https://jitsi.sp-codes.de",
     "summary": {
@@ -35,7 +35,7 @@
   {
     "id": "mastodon",
     "name": "Mastodon",
-    "si": "mastodon",
+    "icon": "si si-mastodon",
     "url": "https://social.sp-codes.de",
     "status": "https://social.sp-codes.de/health",
     "beta": true,
@@ -47,7 +47,7 @@
   {
     "id": "gitea",
     "name": "Gitea",
-    "si": "gitea",
+    "icon": "si si-gitea",
     "url": "https://git.sp-codes.de",
     "status": "https://git.sp-codes.de",
     "summary": {
@@ -58,7 +58,7 @@
   {
     "id": "connectivitycheck",
     "name": "Captive Portal Check",
-    "si": "wifi",
+    "icon": "si si-wifi",
     "status": "https://connectivitycheck.sp-codes.de/generate204",
     "summary": {
       "de": "Eine datenschutzfreundliches Tool, um Anmeldeseiten in WLAN-Netzwerken zu erkennen.",
@@ -68,7 +68,7 @@
   {
     "id": "firefox-sync",
     "name": "Firefox Sync",
-    "si": "firefox-browser",
+    "icon": "si si-firefox-browser",
     "status": "https://sync.firefox.sp-codes.de/token/",
     "summary": {
       "de": "Ein Service um Firefox Einstellungen, Lesezeichen, offene Tabs und vieles mehr über verschiedene Geräte zu synchronisieren.",
@@ -78,7 +78,7 @@
   {
     "id": "shields",
     "name": "Shields",
-    "si": "tags",
+    "icon": "si si-tags",
     "url": "https://shields.sp-codes.de",
     "status": "https://shields.sp-codes.de",
     "summary": {
@@ -89,7 +89,7 @@
   {
     "id": "translate",
     "name": "LibreTranslate",
-    "si": "language",
+    "icon": "si si-language",
     "url": "https://translate.sp-codes.de",
     "status": "https://translate.sp-codes.de",
     "beta": true,
@@ -101,7 +101,7 @@
   {
     "id": "invidious",
     "name": "Invidious",
-    "si": "youtube",
+    "icon": "si si-youtube",
     "url": "https://invidious.sp-codes.de",
     "status": "https://invidious.sp-codes.de",
     "summary": {
@@ -112,7 +112,7 @@
   {
     "id": "nitter",
     "name": "Nitter",
-    "si": "twitter",
+    "icon": "si si-twitter",
     "url": "https://nitter.sp-codes.de",
     "status": "https://nitter.sp-codes.de",
     "summary": {
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index 4d3ad77..fc410de 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -40,7 +40,7 @@ title: sp-codes
 <body>
 <nav class="nav menu border-bottom">
     <div class="toggle">
-        <label for="menu" class="m-0"><span class="fas fa-bars fa-fw mr-1"></span>{{ strings.menu[locale] }}</label>
+        <label for="menu" class="m-0"><span class="si si-bars mr-1"></span>{{ strings.menu[locale] }}</label>
 
         <div class="flex-grow-1"></div>
 
@@ -59,7 +59,7 @@ title: sp-codes
         {% if not entry.url.startsWith("https") and entry.url.includes(locale) or entry.locale == locale %}
         <div class="item{% if entry.url == page.url %} active{% endif %}">
             <a href="{{ entry.url | url }}" class="mr-3">
-                {% if entry.icon %}<span class="fas fa-{{ entry.icon }} fa-fw mr-1"></span>{% endif %}{{ entry.title }}
+                {% if entry.icon %}<span class="{{ entry.icon }} mr-1"></span>{% endif %}{{ entry.title }}
             </a>
         </div>
         {% endif %}
diff --git a/src/_includes/services-extended.html b/src/_includes/services-extended.html
index ac4801c..1d586cc 100644
--- a/src/_includes/services-extended.html
+++ b/src/_includes/services-extended.html
@@ -6,11 +6,7 @@
         <div class="beta">TEST-PHASE</div>
         {% endif %}
         <div class="inner">
-            {% if service.si %}
-            <i class="si si-{{service.si}} fa-4x"></i>
-            {% else %}
-            <i class="{{service.icon}} fa-4x"></i>
-            {% endif %}
+            <i class="{{service.icon}} si-4x"></i>
             <h2 class="mt-2 mb-1">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
                     class="fas fa-external-link-alt"></i></a>{% endif %}</h2>
             {% if service.status %}
diff --git a/src/_includes/services-simple.html b/src/_includes/services-simple.html
index e0d1c44..29747ce 100644
--- a/src/_includes/services-simple.html
+++ b/src/_includes/services-simple.html
@@ -6,11 +6,7 @@
             {% if service.beta == true %}
             <div class="beta">TEST-PHASE</div>
             {% endif %}
-            {% if service.si %}
-            <i class="si si-{{service.si}} fa-2x"></i>
-            {% else %}
-            <i class="{{service.icon}} fa-fw fa-2x"></i>
-            {% endif %}
+            <i class="{{service.icon}} si-2x"></i>
             <h2 class="mt-2">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
                     class="fas fa-external-link-alt"></i></a>{% endif %}</h2>
         </div>
diff --git a/src/de/all-donations.html b/src/de/all-donations.html
index ef5510f..2533d03 100644
--- a/src/de/all-donations.html
+++ b/src/de/all-donations.html
@@ -3,7 +3,7 @@ layout: base.njk
 key: all-donations
 title: Unterstützen
 ---
-<h1><i class="fas fa-hand-holding-heart"></i> Alle Spenden</h1>
+<h1><i class="si si-hand-holding-heart"></i> Alle Spenden</h1>
 
 <p><a href="/{{locale}}/donate/">&#10132; Unterstützen</a></p>
 
diff --git a/src/de/blog.md b/src/de/blog.md
index d22c5ac..c0c89c1 100644
--- a/src/de/blog.md
+++ b/src/de/blog.md
@@ -3,7 +3,7 @@ key: blog
 eleventyNavigation:
   key: blog
   title: Blog
-  icon: book
+  icon: si si-book
   url: https://blog.sp-codes.de/
   locale: de
   order: 1
diff --git a/src/de/contact.html b/src/de/contact.html
index 28d7be3..cc82522 100644
--- a/src/de/contact.html
+++ b/src/de/contact.html
@@ -5,10 +5,10 @@ title: Kontakt
 eleventyNavigation:
   key: contact
   title: Kontakt
-  icon: comment-dots
+  icon: si si-comment-dots
   order: 3
 ---
-<h1><i class="fas fa-comment-dots"></i> Kontaktmöglichkeiten</h1>
+<h1><i class="si si-comment-dots"></i> Kontaktmöglichkeiten</h1>
 <p>Du möchtest mit mir in Kontakt treten, mir einen Fehler mitteilen, hast eine Frage zu einem Dienst oder möchtest
     mich unterstützen? Schick mir gerne deine Nachricht auf einem der folgenden Wege. Ich freue mich von dir zu
     hören.</p>
diff --git a/src/de/donate.html b/src/de/donate.html
index f299062..9ed35a9 100644
--- a/src/de/donate.html
+++ b/src/de/donate.html
@@ -5,10 +5,10 @@ title: Unterstützen
 eleventyNavigation:
   key: donate
   title: Unterstützen
-  icon: hand-holding-heart
+  icon: si si-hand-holding-heart
   order: 4
 ---
-<h1><i class="fas fa-hand-holding-heart"></i> Unterstützen</h1>
+<h1><i class="si si-hand-holding-heart"></i> Unterstützen</h1>
 
 <p>Alle öffentlichen Dienste sind kostenfrei nutzbar. Wenn du dich trotzdem an den Unkosten für Server-Infrastruktur
     beteiligen oder mir eine kleine Anerkennung für meinen Blog zukommen lassen willst, kannst du mich über die
@@ -17,7 +17,7 @@ eleventyNavigation:
 <div class="row justify-content-center mb-5">
     <div class="col-12 col-md-10 col-lg-8">
         <div class="card mb-3">
-            <h2><i class="fas fa-comments fa-fw m-2"></i>Empfehlen</h2>
+            <h2><i class="si si-comments fa-fw m-2"></i>Empfehlen</h2>
             <div>Gerne darfst du meine Dienste und meine Blog-Beiträge weiter empfehlen. Ich freue mich sehr, wenn ich
                 euch damit eine Freude machen kann.
             </div>
diff --git a/src/de/index.html b/src/de/index.html
index 833ea88..0d667c2 100644
--- a/src/de/index.html
+++ b/src/de/index.html
@@ -5,7 +5,7 @@ title: Home
 eleventyNavigation:
   key: home
   title: Home
-  icon: home
+  icon: si si-home
 ---
 <div class="row justify-content-center py-4 border-top">
     <div class="col-lg-8 col-md-10 col-12">
diff --git a/src/de/services.html b/src/de/services.html
index 67f488f..d167d16 100644
--- a/src/de/services.html
+++ b/src/de/services.html
@@ -5,10 +5,10 @@ title: Dienste
 eleventyNavigation:
   key: services
   title: Dienste
-  icon: server
+  icon: si si-server
   order: 2
 ---
-<h1><i class="fas fa-server"></i> Dienste</h1>
+<h1><i class="si si-server"></i> Dienste</h1>
 <p>In meiner Freizeit stelle ich verschiedene quelloffene Dienste für die freie Nutzung bereit. Hier findest du eine
     Übersicht der einzelnen Services und jeweils eine kurze Beschreibung. Alle Services werden in Deutschland
     gehostet. Fühl dich frei, davon Gebrauch zu machen.</p>
diff --git a/src/en/all-donations.html b/src/en/all-donations.html
index 03ad175..de75659 100644
--- a/src/en/all-donations.html
+++ b/src/en/all-donations.html
@@ -3,7 +3,7 @@ layout: base.njk
 key: all-donations
 title: Unterstützen
 ---
-<h1><i class="fas fa-hand-holding-heart"></i> All Donations</h1>
+<h1><i class="si si-hand-holding-heart"></i> All Donations</h1>
 
 <p><a href="/{{locale}}/donate/">&#10132; Donate</a></p>
 
diff --git a/src/en/blog.md b/src/en/blog.md
index 337102f..9308a8f 100644
--- a/src/en/blog.md
+++ b/src/en/blog.md
@@ -3,7 +3,7 @@ key: blog
 eleventyNavigation:
   key: blog
   title: Blog
-  icon: book
+  icon: si si-book
   url: https://blog.sp-codes.de/
   locale: en
   order: 1
diff --git a/src/en/contact.html b/src/en/contact.html
index 52dbb3e..45fc82b 100644
--- a/src/en/contact.html
+++ b/src/en/contact.html
@@ -5,10 +5,10 @@ title: Contact
 eleventyNavigation:
   key: contact
   title: Contact
-  icon: comment-dots
+  icon: si si-comment-dots
   order: 3
 ---
-<h1><i class="fas fa-comment-dots"></i> Contact Information</h1>
+<h1><i class="si si-comment-dots"></i> Contact Information</h1>
 <p>You want to contact me, report a problem, have a question about a service or would like to support me? Please
     send me your message in any of the following ways. I am looking forward to receive your message.</p>
 <div class="row justify-content-center">
diff --git a/src/en/donate.html b/src/en/donate.html
index 9d9103f..9dafa2c 100644
--- a/src/en/donate.html
+++ b/src/en/donate.html
@@ -5,10 +5,10 @@ title: Donate
 eleventyNavigation:
   key: donate
   title: Donate
-  icon: hand-holding-heart
+  icon: si si-hand-holding-heart
   order: 4
 ---
-<h1><i class="fas fa-hand-holding-heart"></i> Donate</h1>
+<h1><i class="si si-hand-holding-heart"></i> Donate</h1>
 
 <p>All public services can be used for free. If you still want to contribute to the costs for server infrastructure or
     send me a small donation for my blog, you can support me in the following ways<sup>1</sup>:</p>
@@ -16,7 +16,7 @@ eleventyNavigation:
 <div class="row justify-content-center">
     <div class="col-12 col-md-10 col-lg-8">
         <div class="card mb-3">
-            <h2><i class="fas fa-comments fa-fw m-2"></i>Recommend</h2>
+            <h2><i class="si si-comments m-2"></i>Recommend</h2>
             <div>You are welcome to recommend my services and my blog posts. I am very glad if I can make you happy with
                 it.
             </div>
diff --git a/src/en/index.html b/src/en/index.html
index 5f43784..342a5fa 100644
--- a/src/en/index.html
+++ b/src/en/index.html
@@ -5,7 +5,7 @@ title: Home
 eleventyNavigation:
   key: home
   title: Home
-  icon: home
+  icon: si si-home
 ---
 <div class="row justify-content-center py-4 border-top">
     <div class="col-lg-8 col-md-10 col-12">
diff --git a/src/en/services.html b/src/en/services.html
index 233d422..0b50f8b 100644
--- a/src/en/services.html
+++ b/src/en/services.html
@@ -5,10 +5,10 @@ title: Services
 eleventyNavigation:
   key: services
   title: Services
-  icon: server
+  icon: si si-server
   order: 2
 ---
-<h1><i class="fas fa-server"></i> Services</h1>
+<h1><i class="si si-server"></i> Services</h1>
 <p>In my spare time I provide various open source services for free. Here you can find an overview of the individual
     services and a short description for each of them. All services are hosted in Germany. Feel free to use it.</p>
 
diff --git a/src/img/icon/bars.svg b/src/img/icon/bars.svg
new file mode 100644
index 0000000..192b260
--- /dev/null
+++ b/src/img/icon/bars.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#fff"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
diff --git a/src/img/icon/book.svg b/src/img/icon/book.svg
new file mode 100644
index 0000000..87faadb
--- /dev/null
+++ b/src/img/icon/book.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#fff"><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"/></svg>
diff --git a/src/img/icon/comment-dots.svg b/src/img/icon/comment-dots.svg
new file mode 100644
index 0000000..d1ff6af
--- /dev/null
+++ b/src/img/icon/comment-dots.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#fff"><path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32zM128 272c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
diff --git a/src/img/icon/hand-holding-heart.svg b/src/img/icon/hand-holding-heart.svg
new file mode 100644
index 0000000..d237775
--- /dev/null
+++ b/src/img/icon/hand-holding-heart.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#fff"><path d="M275.3 250.5c7 7.4 18.4 7.4 25.5 0l108.9-114.2c31.6-33.2 29.8-88.2-5.6-118.8-30.8-26.7-76.7-21.9-104.9 7.7L288 36.9l-11.1-11.6C248.7-4.4 202.8-9.2 172 17.5c-35.3 30.6-37.2 85.6-5.6 118.8l108.9 114.2zm290 77.6c-11.8-10.7-30.2-10-42.6 0L430.3 402c-11.3 9.1-25.4 14-40 14H272c-8.8 0-16-7.2-16-16s7.2-16 16-16h78.3c15.9 0 30.7-10.9 33.3-26.6 3.3-20-12.1-37.4-31.6-37.4H192c-27 0-53.1 9.3-74.1 26.3L71.4 384H16c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16h356.8c14.5 0 28.6-4.9 40-14L564 377c15.2-12.1 16.4-35.3 1.3-48.9z"></path></svg>
diff --git a/src/img/icon/home.svg b/src/img/icon/home.svg
new file mode 100644
index 0000000..0c9ec48
--- /dev/null
+++ b/src/img/icon/home.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#fff"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>
diff --git a/src/img/icon/server.svg b/src/img/icon/server.svg
new file mode 100644
index 0000000..fef0f77
--- /dev/null
+++ b/src/img/icon/server.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#fff"><path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"></path></svg>
diff --git a/src/scss/icons.scss b/src/scss/icons.scss
index ce0dfcc..c51a5a1 100644
--- a/src/scss/icons.scss
+++ b/src/scss/icons.scss
@@ -29,17 +29,23 @@
   }
 }
 
+@include svg-icon('bars');
+@include svg-icon('book');
+@include svg-icon('comment-dots');
 @include svg-icon('comments');
 @include svg-icon('envelope');
 @include svg-icon('firefox-browser');
 @include svg-icon('gitea');
 @include svg-icon('github');
+@include svg-icon('hand-holding-heart');
+@include svg-icon('home');
 @include svg-icon('language');
 @include svg-icon('mastodon');
 @include svg-icon('matrix');
 @include svg-icon('opencollective');
 @include svg-icon('search');
 @include svg-icon('stackoverflow');
+@include svg-icon('server');
 @include svg-icon('tags');
 @include svg-icon('threema');
 @include svg-icon('twitter');