From 0cae02babf87a3346d9f46436c2ec65c23c69ce5 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Fri, 2 Jul 2021 23:46:05 +0200
Subject: [PATCH] Change all SVG in code into Vue Components

---
 src/components/Experience.vue             | 12 ++++--
 src/components/ExperiencesAbout.vue       |  4 +-
 src/components/Formation.vue              | 12 ++++--
 src/components/FormationsAbout.vue        |  4 +-
 src/components/Header.vue                 | 50 +++++++----------------
 src/components/InterestsAbout.vue         | 39 +++++-------------
 src/components/LanguagesAbout.vue         |  8 +---
 src/components/SkillsAbout.vue            |  4 +-
 src/components/icons/BookIcon.vue         | 20 +++++++++
 src/components/icons/ComputerIcon.vue     | 20 +++++++++
 src/components/icons/ContactIcon.vue      | 20 +++++++++
 src/components/icons/CpuIcon.vue          | 15 +++++++
 src/components/icons/CubeIcon.vue         | 29 +++++++++++++
 src/components/icons/DegreeHatIcon.vue    | 15 +++++++
 src/components/icons/DevelopmentIcon.vue  | 14 +++++++
 src/components/icons/FireIcon.vue         | 26 ++++++++++++
 src/components/icons/HomeIcon.vue         | 21 ++++++++++
 src/components/icons/InfiniteIcon.vue     | 14 +++++++
 src/components/icons/LightbulbIcon.vue    | 20 +++++++++
 src/components/icons/MoonIcon.vue         | 15 +++++++
 src/components/icons/MotorcycleIcon.vue   | 19 +++++++++
 src/components/icons/PlaneIcon.vue        | 18 ++++++++
 src/components/icons/PresentationIcon.vue | 25 ++++++++++++
 src/components/icons/ServerIcon.vue       | 14 +++++++
 src/components/icons/SunIcon.vue          | 46 +++++++++++++++++++++
 src/components/icons/TranslateIcon.vue    | 14 +++++++
 src/components/icons/UserIcon.vue         | 21 ++++++++++
 src/components/icons/VialIcon.vue         | 14 +++++++
 28 files changed, 444 insertions(+), 89 deletions(-)
 create mode 100644 src/components/icons/BookIcon.vue
 create mode 100644 src/components/icons/ComputerIcon.vue
 create mode 100644 src/components/icons/ContactIcon.vue
 create mode 100644 src/components/icons/CpuIcon.vue
 create mode 100644 src/components/icons/CubeIcon.vue
 create mode 100644 src/components/icons/DegreeHatIcon.vue
 create mode 100644 src/components/icons/DevelopmentIcon.vue
 create mode 100644 src/components/icons/FireIcon.vue
 create mode 100644 src/components/icons/HomeIcon.vue
 create mode 100644 src/components/icons/InfiniteIcon.vue
 create mode 100644 src/components/icons/LightbulbIcon.vue
 create mode 100644 src/components/icons/MoonIcon.vue
 create mode 100644 src/components/icons/MotorcycleIcon.vue
 create mode 100644 src/components/icons/PlaneIcon.vue
 create mode 100644 src/components/icons/PresentationIcon.vue
 create mode 100644 src/components/icons/ServerIcon.vue
 create mode 100644 src/components/icons/SunIcon.vue
 create mode 100644 src/components/icons/TranslateIcon.vue
 create mode 100644 src/components/icons/UserIcon.vue
 create mode 100644 src/components/icons/VialIcon.vue

diff --git a/src/components/Experience.vue b/src/components/Experience.vue
index 51fd398..ffaab50 100755
--- a/src/components/Experience.vue
+++ b/src/components/Experience.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="flex flex-row mb-5">
     <div class="self-center flex h-3 w-3 mr-3 relative">
-      <span v-if="end === 'Today'" class="animate-ping relative inline h-3 w-3 rounded-full bg-indigo-600 opacity-75"></span>
-      <span v-else class="inline relative h-3 w-3 rounded-full bg-gray-400 opacity-75"></span>
-      <span v-if="end === 'Today'" class="inline absolute rounded-full h-3 w-3 bg-indigo-800"></span>
-      <span v-else class="inline absolute rounded-full h-3 w-3 bg-gray-500"></span>
+      <span
+        class="relative inline h-3 w-3 rounded-full opacity-75"
+        :class="end === 'Today' ? 'animate-ping bg-indigo-600' : 'bg-gray-400'"
+      />
+      <span
+        class="inline absolute rounded-full h-3 w-3"
+        :class="end === 'Today' ? 'bg-indigo-800' : 'bg-gray-500'"
+      />
     </div>
     <div class="leading-7">
       <p v-if="isSameDate()" class="text-base dark:text-dark-100 text-gray-800 leading-6">{{ getBeginDate }} <span class="px-3">|</span> {{location}}</p>
diff --git a/src/components/ExperiencesAbout.vue b/src/components/ExperiencesAbout.vue
index d4414ad..e00021e 100755
--- a/src/components/ExperiencesAbout.vue
+++ b/src/components/ExperiencesAbout.vue
@@ -2,9 +2,7 @@
   <section class="w-full mb-10">
     <h3 class="font-bold text-2xl md:text-4xl mb-3">
       {{ $t('about.title.experiences') }}
-      <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
-      </svg>
+      <PresentationIcon />
     </h3>
     <div v-if="experiences" v-for="experience in experiences">
       <Experience
diff --git a/src/components/Formation.vue b/src/components/Formation.vue
index 411b8f3..cdd39cb 100755
--- a/src/components/Formation.vue
+++ b/src/components/Formation.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="flex flex-row mb-5">
     <div class="self-center flex h-3 w-3 mr-3 relative">
-      <span v-if="end === 'Today'" class="animate-ping relative inline h-3 w-3 rounded-full bg-indigo-600 opacity-75"></span>
-      <span v-else class="inline relative h-3 w-3 rounded-full bg-gray-400 opacity-75"></span>
-      <span v-if="end === 'Today'" class="inline absolute rounded-full h-3 w-3 bg-indigo-800"></span>
-      <span v-else class="inline absolute rounded-full h-3 w-3 bg-gray-500"></span>
+      <span
+        class="relative inline h-3 w-3 rounded-full opacity-75"
+        :class="end === 'Today' ? 'animate-ping bg-indigo-600' : 'bg-gray-400'"
+      />
+      <span
+        class="inline absolute rounded-full h-3 w-3"
+        :class="end === 'Today' ? 'bg-indigo-800' : 'bg-gray-500'"
+      />
     </div>
     <div class="leading-7">
       <p class="text-base dark:text-dark-100 text-gray-800 leading-6">{{ getBeginDate }} - {{ getEndDate }} <span class="px-3">|</span> {{location}}</p>
diff --git a/src/components/FormationsAbout.vue b/src/components/FormationsAbout.vue
index 4dcab27..ce39ba6 100755
--- a/src/components/FormationsAbout.vue
+++ b/src/components/FormationsAbout.vue
@@ -2,9 +2,7 @@
   <div class="w-full mb-10">
     <h3 class="font-bold text-2xl md:text-4xl mb-3">
       {{ $t('about.title.formations') }}
-      <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
-      </svg>
+      <DegreeHatIcon />
     </h3>
     <div v-if="formations" v-for="formation in formations">
       <Formation
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 8b74088..9ac94f0 100755
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -36,70 +36,48 @@
         </div>
         <ul class="dark:text-white dark:bg-black text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
           <nuxt-link to="/" class="w-1/6 nav-link-mobile">
-            <li class="font-medium flex flex-col items-center justify-center">
-              <svg height="32" width="32" class="inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-              </svg>
+            <li class="h-full w-full font-medium flex flex-col items-center justify-center">
+              <HomeIcon :active="true" />
             </li>
           </nuxt-link>
           <nuxt-link to="/about" class="w-1/6 nav-link-mobile">
             <li class="font-medium flex flex-col items-center justify-center">
-              <svg class="inline-block" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-              </svg>
+              <UserIcon :active="false" />
             </li>
           </nuxt-link>
           <nuxt-link to="/blog" class="w-1/6 nav-link-mobile blog">
             <li class="font-medium flex flex-col items-center justify-center">
-              <svg class="inline-block" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-              </svg>
+              <BookIcon />
             </li>
           </nuxt-link>
           <nuxt-link to="/env" class="w-1/6 nav-link-mobile">
             <li class="font-medium flex flex-col items-center justify-center">
-              <svg class="inline-block" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-              </svg>
+              <ComputerIcon />
             </li>
           </nuxt-link>
           <nuxt-link to="/projects" class="w-1/6 nav-link-mobile">
             <li class="font-medium flex flex-col items-center justify-center">
-              <svg class="inline-block" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-              </svg>
+              <LightbulbIcon />
             </li>
           </nuxt-link>
           <nuxt-link to="/contact" class="w-1/6 nav-link-mobile">
-            <li class="font-medium flex flex-col items-center justify-center">
-              <svg class="inline-block" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-              </svg>
-            </li>
+              <li class="font-medium flex flex-col items-center justify-center">
+                <ContactIcon />
+              </li>
           </nuxt-link>
         </ul>
       </nav>
       <div>
         <ul class="flex items-center">
-          <li @click="changeLanguage()" class="mx-1 h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-850">
-            <div v-if="this.$i18n.locale === 'en'">
-              🇫🇷
-            </div>
-            <div v-else>
-              🇬🇧
-            </div>
+          <li @click="changeLanguage()" class="mx-1 h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-400">
+            <TranslateIcon />
           </li>
-          <li @click="changeColorMode()" class="mx-1 h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-850 duration-200">
+          <li @click="changeColorMode()" class="mx-1 h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-400 duration-200">
             <div v-if="this.$colorMode.preference === 'light'">
-              <svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-              </svg>
+              <MoonIcon />
             </div>
             <div v-else>
-              <svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-              </svg>
+              <SunIcon />
             </div>
           </li>
         </ul>
diff --git a/src/components/InterestsAbout.vue b/src/components/InterestsAbout.vue
index 2893eaa..d1338c7 100755
--- a/src/components/InterestsAbout.vue
+++ b/src/components/InterestsAbout.vue
@@ -2,54 +2,39 @@
   <section class="w-full mb-10">
     <h3 class="font-bold text-2xl md:text-4xl">
       {{ $t('about.title.interests') }}
-      <svg height="32" width="32" class="inline icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
-      </svg>
+      <FireIcon />
     </h3>
     <div>
       <ul class="text-xl text-gray-700 dark:text-gray-400">
         <li class="my-2">
           {{ $t('about.title.technologies') }}
-          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
-          </svg>
+          <CpuIcon />
         </li>
         <li class="my-2">
           {{ $t('about.interests.dev') }}
-          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-          </svg>
+          <DevelopmentIcon />
         </li>
         <li class="my-2">
           {{ $t('about.interests.devops') }}
-          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-          </svg>
+          <InfiniteIcon />
         </li>
         <li class="my-2">
           {{ $t('about.interests.startups') }}
-          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
-          </svg>
+          <VialIcon />
         </li>
         <li class="my-2">
           {{ $t('about.interests.sysadmin') }}
-          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
-          </svg>
+          <ServerIcon />
         </li>
         <li class="my-2">
           {{ $t('about.interests.trips') }}
-          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-          </svg>
+          <PlaneIcon />
         </li>
         <li class="my-2">
           {{ $t('about.interests.moto') }}
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="inline icon" width="25" height="25"
-               preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M12.72 11l-2 2h-.77l-.25-.69c-.18-.48-.42-.92-.72-1.31h3.74m2.69-6H11v2h3.59l2 2H5c-2.8 0-5 2.2-5 5s2.2 5 5 5c2.46 0 4.45-1.69 4.9-4h1.65l2.77-2.77c-.21.54-.32 1.14-.32 1.77c0 2.8 2.2 5 5 5s5-2.2 5-5c0-2.65-1.97-4.77-4.56-4.97L15.41 5zM19 17c-1.66 0-3-1.34-3-3s1.34-3 3-3s3 1.34 3 3s-1.34 3-3 3zM5 17c-1.63 0-3-1.37-3-3s1.37-3 3-3c1.28 0 2.4.85 2.82 2H5v2h2.82C7.4 16.15 6.28 17 5 17z" fill="currentColor"></path></svg>
+          <MotorcycleIcon />
         </li>
+        <!-- todo add cloud -->
       </ul>
     </div>
   </section>
@@ -57,10 +42,6 @@
 
 <script>
 export default {
-  name: "InterestsAbout"
+  name: "InterestsAbout",
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/LanguagesAbout.vue b/src/components/LanguagesAbout.vue
index ba5011b..5acc150 100755
--- a/src/components/LanguagesAbout.vue
+++ b/src/components/LanguagesAbout.vue
@@ -2,9 +2,7 @@
   <section class="w-full mb-10">
     <h3 class="font-bold text-2xl md:text-4xl">
       {{ $t('about.title.languages') }}
-      <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
-      </svg>
+      <TranslateIcon />
     </h3>
     <div>
       <table class="text-base text-xl text-gray-700 dark:text-gray-400">
@@ -26,7 +24,3 @@ export default {
   name: "LanguagesAbout"
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/SkillsAbout.vue b/src/components/SkillsAbout.vue
index 358d7b2..3da3e68 100755
--- a/src/components/SkillsAbout.vue
+++ b/src/components/SkillsAbout.vue
@@ -2,9 +2,7 @@
   <section class="w-full mb-10 mt-4">
     <h3 class="font-bold text-2xl md:text-4xl mb-3">
       {{ $t('about.title.skills') }}
-      <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-      </svg>
+      <CubeIcon />
     </h3>
     <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden lg:flex-wrap space-x-4 lg:space-x-0 lg:justify-center">
       <div v-if="skills" v-for="skill in skills">
diff --git a/src/components/icons/BookIcon.vue b/src/components/icons/BookIcon.vue
new file mode 100644
index 0000000..88c2d0e
--- /dev/null
+++ b/src/components/icons/BookIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M21 4H7a2 2 0 1 0 0 4h14v13a1 1 0 0 1-1 1H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h13a1 1 0 0 1 1 1v1zM5 18a2 2 0 0 0 2 2h12V10H7a3.982 3.982 0 0 1-2-.535V18zM20 7H7a1 1 0 1 1 0-2h13v2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: "BookIcon",
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/src/components/icons/ComputerIcon.vue b/src/components/icons/ComputerIcon.vue
new file mode 100644
index 0000000..a08a9b2
--- /dev/null
+++ b/src/components/icons/ComputerIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: "ComputerIcon",
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/src/components/icons/ContactIcon.vue b/src/components/icons/ContactIcon.vue
new file mode 100644
index 0000000..411f075
--- /dev/null
+++ b/src/components/icons/ContactIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-1 14H5c-.55 0-1-.45-1-1V8l6.94 4.34c.65.41 1.47.41 2.12 0L20 8v9c0 .55-.45 1-1 1zm-7-7L4 6h16l-8 5z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: "ContactIcon",
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/src/components/icons/CpuIcon.vue b/src/components/icons/CpuIcon.vue
new file mode 100644
index 0000000..362ca34
--- /dev/null
+++ b/src/components/icons/CpuIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" focusable="false">
+    <g fill="currentColor">
+      <path
+        d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0zm-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3h-7zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "CpuIcon"
+}
+</script>
diff --git a/src/components/icons/CubeIcon.vue b/src/components/icons/CubeIcon.vue
new file mode 100644
index 0000000..7e6fe15
--- /dev/null
+++ b/src/components/icons/CubeIcon.vue
@@ -0,0 +1,29 @@
+<template>
+  <svg class="inline" width="1em" height="1em" viewBox="0 0 24 24" focusable="false">
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <path d="M6 17.6l-2-1.1V14"/>
+      <path d="M4 10V7.5l2-1.1"/>
+      <path d="M10 4.1L12 3l2 1.1"/>
+      <path d="M18 6.4l2 1.1V10"/>
+      <path d="M20 14v2.5l-2 1.12"/>
+      <path d="M14 19.9L12 21l-2-1.1"/>
+      <path d="M12 12l2-1.1"/>
+      <path d="M18 8.6l2-1.1"/>
+      <path d="M12 12v2.5"/>
+      <path d="M12 18.5V21"/>
+      <path d="M12 12l-2-1.12"/>
+      <path d="M6 8.6L4 7.5"/>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "CubeIcon"
+}
+</script>
diff --git a/src/components/icons/DegreeHatIcon.vue b/src/components/icons/DegreeHatIcon.vue
new file mode 100644
index 0000000..e32ced1
--- /dev/null
+++ b/src/components/icons/DegreeHatIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="inline" width="1em" height="1em" viewBox="0 0 48 48" focusable="false">
+    <g fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round">
+      <path d="M2 17.4L23.022 9l21.022 8.4l-21.022 8.4L2 17.4z"/>
+      <path d="M44.044 17.51v9.223" stroke-linecap="round"/>
+      <path d="M11.556 21.825v12.442S16.366 39 23.021 39c6.657 0 11.467-4.733 11.467-4.733V21.825" stroke-linecap="round"/>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "DegreeHatIcon"
+}
+</script>
diff --git a/src/components/icons/DevelopmentIcon.vue b/src/components/icons/DevelopmentIcon.vue
new file mode 100644
index 0000000..7e411d8
--- /dev/null
+++ b/src/components/icons/DevelopmentIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg class="inline" width="1.2em" height="1.2em" viewBox="0 0 32 32" focusable="false">
+    <path
+      d="M5 6v13.563l-2.281 2.314A2.444 2.444 0 0 0 2 23.594A2.418 2.418 0 0 0 4.406 26h23.188A2.418 2.418 0 0 0 30 23.594a2.45 2.45 0 0 0-.719-1.719L27 19.562V6H5zm2 2h18v11H7V8zm9 1l-1.5 9H16l1.5-9H16zm-3.914 2l-1.719 2.068L10 13.5l.367.432L12.086 16l1.086-.863L11.81 13.5l1.36-1.637L12.087 11zm7.828 0l-1.086.863L20.19 13.5l-1.36 1.637l1.085.863l1.719-2.068L22 13.5l-.367-.432L19.914 11zM6.437 21h19.125l2.313 2.281a.464.464 0 0 1 .125.313a.386.386 0 0 1-.406.406H4.406A.386.386 0 0 1 4 23.594c0-.11.047-.234.125-.313L6.438 21z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "DevelopmentIcon"
+}
+</script>
diff --git a/src/components/icons/FireIcon.vue b/src/components/icons/FireIcon.vue
new file mode 100644
index 0000000..46f0f41
--- /dev/null
+++ b/src/components/icons/FireIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg class="inline" width="1em" height="1em" viewBox="0 0 24 24" focusable="false">
+    <g fill="none">
+      <path
+        d="M17.657 18.657A8 8 0 0 1 6.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0 1 20 13a7.975 7.975 0 0 1-2.343 5.657z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M9.879 16.121A3 3 0 1 0 12.015 11L11 14H9c0 .768.293 1.536.879 2.121z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round">
+      </path>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "FireIcon"
+}
+</script>
diff --git a/src/components/icons/HomeIcon.vue b/src/components/icons/HomeIcon.vue
new file mode 100644
index 0000000..ecedc96
--- /dev/null
+++ b/src/components/icons/HomeIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M20 20V9.132l-8-4.8l-8 4.8V20h4v-2.75a4 4 0 1 1 8 0V20h4zm-6 2v-4.75a2 2 0 1 0-4 0V22H4a2 2 0 0 1-2-2V9.132a2 2 0 0 1 .971-1.715l8-4.8a2 2 0 0 1 2.058 0l8 4.8A2 2 0 0 1 22 9.132V20a2 2 0 0 1-2 2h-6z"
+      stroke="currentColor"
+      :class="{active: 'fill-black dark:fill-white'}"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: "HomeIcon",
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/src/components/icons/InfiniteIcon.vue b/src/components/icons/InfiniteIcon.vue
new file mode 100644
index 0000000..0d714f4
--- /dev/null
+++ b/src/components/icons/InfiniteIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg class="inline" width="1.2em" height="1.2em" viewBox="0 0 512 512" focusable="false">
+    <path
+      d="M382 136c-40.87 0-73.46 20.53-93.6 37.76l-.71.61l-11.47 12.47l25.32 41.61l18.74-18.79C339.89 193.1 361.78 184 382 184c40.8 0 74 32.3 74 72s-33.2 72-74 72c-62 0-104.14-81.95-104.56-82.78C275 240.29 221.56 136 130 136C62.73 136 8 189.83 8 256s54.73 120 122 120c32.95 0 65.38-13.11 93.79-37.92l.61-.54l11.38-12.38l-25.33-41.61l-18.83 18.88C172 319.4 151.26 328 130 328c-40.8 0-74-32.3-74-72s33.2-72 74-72c62 0 104.14 81.95 104.56 82.78C237 271.71 290.44 376 382 376c67.27 0 122-53.83 122-120s-54.73-120-122-120z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "InfiniteIcon"
+}
+</script>
diff --git a/src/components/icons/LightbulbIcon.vue b/src/components/icons/LightbulbIcon.vue
new file mode 100644
index 0000000..ebb9156
--- /dev/null
+++ b/src/components/icons/LightbulbIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg class="inline" width="1.5em" height="2.5em" viewBox="0 0 352 512" focusable="false">
+    <path
+      d="M176 80c-52.94 0-96 43.06-96 96c0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64c8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78c16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07c-5.59-17.81-22.82-64.77-62.17-109.67c-20.54-23.43-31.52-53.15-31.61-84.14c-.2-73.64 59.67-128 127.95-128c70.58 0 128 57.42 128 128c0 30.97-11.24 60.85-31.65 84.14c-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176C352 78.8 273.2 0 176 0z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LightbulbIcon",
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/src/components/icons/MoonIcon.vue b/src/components/icons/MoonIcon.vue
new file mode 100644
index 0000000..6dff644
--- /dev/null
+++ b/src/components/icons/MoonIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 16 16" focusable="false">
+    <g fill="currentColor">
+      <path
+        d="M6 .278a.768.768 0 0 1 .08.858a7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277c.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316a.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71C0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "MoonIcon"
+}
+</script>
diff --git a/src/components/icons/MotorcycleIcon.vue b/src/components/icons/MotorcycleIcon.vue
new file mode 100644
index 0000000..55d6ee8
--- /dev/null
+++ b/src/components/icons/MotorcycleIcon.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg class="inline" width="1.2em" height="1.2em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M12 11.39c0-.65-.39-1.23-.98-1.48L5.44 7.55c-1.48 1.68-2.32 3.7-2.8 5.45h7.75c.89 0 1.61-.72 1.61-1.61z"
+      fill="currentColor"
+    />
+    <path
+      d="M21.96 11.22c-.41-4.41-4.56-7.49-8.98-7.2c-2.51.16-4.44.94-5.93 2.04l4.74 2.01c1.33.57 2.2 1.87 2.2 3.32c0 1.99-1.62 3.61-3.61 3.61H2.21C2 16.31 2 17.2 2 17.2v.8c0 1.1.9 2 2 2h10c4.67 0 8.41-4.01 7.96-8.78z"
+      stroke="currentColor"
+      fill="none"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "MotorcycleIcon"
+}
+</script>
diff --git a/src/components/icons/PlaneIcon.vue b/src/components/icons/PlaneIcon.vue
new file mode 100644
index 0000000..99319bb
--- /dev/null
+++ b/src/components/icons/PlaneIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="inline" width="1.2em" height="1.2em" viewBox="0 0 36 36" focusable="false">
+    <path
+      d="M35.77 8.16a2.43 2.43 0 0 0-1.9-2L28 4.87a4.5 4.5 0 0 0-3.65.79L7 18.3l-4.86-.2a1.86 1.86 0 0 0-1.23 3.31l5 3.93c.6.73 1 .59 10.93-4.82l.93 9.42a1.36 1.36 0 0 0 .85 1.18a1.43 1.43 0 0 0 .54.1a1.54 1.54 0 0 0 1-.41l2.39-2.18a1.52 1.52 0 0 0 .46-.83l2.19-11.9c3.57-2 6.95-3.88 9.36-5.25a2.43 2.43 0 0 0 1.21-2.49zm-2.2.75c-2.5 1.42-6 3.41-9.76 5.47l-.41.23l-2.33 12.67l-1.47 1.34l-1.1-11.3l-1.33.68C10 22 7.61 23.16 6.79 23.52l-4.3-3.41l5.08.22l18-13.06a2.51 2.51 0 0 1 2-.45l5.85 1.26a.43.43 0 0 1 .35.37a.42.42 0 0 1-.2.46z"
+      fill="currentColor"
+    />
+    <path
+      d="M7 12.54l3.56 1l1.64-1.19l-4-1.16l1.8-1.1l5.47-.16l2.3-1.67L10 8.5a1.25 1.25 0 0 0-.7.17L6.67 10.2A1.28 1.28 0 0 0 7 12.54z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "PlaneIcon"
+}
+</script>
diff --git a/src/components/icons/PresentationIcon.vue b/src/components/icons/PresentationIcon.vue
new file mode 100644
index 0000000..16823dd
--- /dev/null
+++ b/src/components/icons/PresentationIcon.vue
@@ -0,0 +1,25 @@
+<template>
+  <svg class="inline" width="1em" height="1 em" viewBox="0 0 24 24" focusable="false">
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M9 12V8"/>
+      <path d="M15 12v-2"/>
+      <path d="M12 12v-1"/>
+      <path d="M3 4h18"/>
+      <path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4"/>
+      <path d="M12 16v4"/>
+      <path d="M9 20h6"/>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "PresentationIcon"
+}
+</script>
diff --git a/src/components/icons/ServerIcon.vue b/src/components/icons/ServerIcon.vue
new file mode 100644
index 0000000..b53aa5b
--- /dev/null
+++ b/src/components/icons/ServerIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg  class="inline" width="1.2em" height="1.2em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M15 17a1 1 0 1 0 1 1a1 1 0 0 0-1-1zm-6 0H6a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2zm9 0a1 1 0 1 0 1 1a1 1 0 0 0-1-1zm-3-6a1 1 0 1 0 1 1a1 1 0 0 0-1-1zm-6 0H6a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2zm9-6a1 1 0 1 0 1 1a1 1 0 0 0-1-1zm0 6a1 1 0 1 0 1 1a1 1 0 0 0-1-1zm4-6a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v2a3 3 0 0 0 .78 2A3 3 0 0 0 2 11v2a3 3 0 0 0 .78 2A3 3 0 0 0 2 17v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a3 3 0 0 0-.78-2a3 3 0 0 0 .78-2v-2a3 3 0 0 0-.78-2A3 3 0 0 0 22 7zm-2 14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1zm0-6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1zm0-6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1zm-5-2a1 1 0 1 0 1 1a1 1 0 0 0-1-1zM9 5H6a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "ServerIcon"
+}
+</script>
diff --git a/src/components/icons/SunIcon.vue b/src/components/icons/SunIcon.vue
new file mode 100644
index 0000000..2c65c88
--- /dev/null
+++ b/src/components/icons/SunIcon.vue
@@ -0,0 +1,46 @@
+<template>
+  <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 512 512" focusable="false">
+    <path
+      d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z"
+      fill="currentColor"
+    />
+    <path
+      d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z"
+      fill="currentColor"
+    />
+    <path
+      d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
+      fill="currentColor"
+    />
+    <path
+      d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
+      fill="currentColor"
+    />
+    <path
+      d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z"
+      fill="currentColor"
+    />
+    <path
+      d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z"
+      fill="currentColor"
+    />
+    <path
+      d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
+      fill="currentColor"
+    />
+    <path
+      d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
+      fill="currentColor"
+    />
+    <path
+      d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "SunIcon"
+}
+</script>
diff --git a/src/components/icons/TranslateIcon.vue b/src/components/icons/TranslateIcon.vue
new file mode 100644
index 0000000..a86a3e6
--- /dev/null
+++ b/src/components/icons/TranslateIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg class="inline" width="1em" height="1em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M12.87 15.07l-2.54-2.51l.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35C8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5l3.11 3.11l.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "TranslateIcon"
+}
+</script>
diff --git a/src/components/icons/UserIcon.vue b/src/components/icons/UserIcon.vue
new file mode 100644
index 0000000..292ceb0
--- /dev/null
+++ b/src/components/icons/UserIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M15.71 12.71a6 6 0 1 0-7.42 0a10 10 0 0 0-6.22 8.18a1 1 0 0 0 2 .22a8 8 0 0 1 15.9 0a1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1a10 10 0 0 0-6.25-8.19zM12 12a4 4 0 1 1 4-4a4 4 0 0 1-4 4z"
+      stroke="currentColor"
+      :class="{active: 'fill-black dark:fill-white'}"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: "UserIcon",
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/src/components/icons/VialIcon.vue b/src/components/icons/VialIcon.vue
new file mode 100644
index 0000000..388f3e8
--- /dev/null
+++ b/src/components/icons/VialIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg class="inline" width="1.3em" height="1.3em" viewBox="0 0 32 32" focusable="false">
+    <path
+      d="M18.688 3.273L17.27 4.687l1.32 1.32L5.5 19.1c-2 2-2 5.4 0 7.4c1 1 2.4 1.5 3.7 1.5c1.4 0 2.7-.5 3.7-1.5l13.092-13.092l1.25 1.248l1.414-1.414l-9.968-9.969zm1.304 4.135l4.6 4.6L20.6 16h-9.2l8.592-8.592zM9.4 18h9.2l-7.1 7.1c-1.3 1.3-3.3 1.3-4.6 0c-1.3-1.3-1.3-3.3 0-4.6L9.4 18z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "VialIcon"
+}
+</script>