From 96c78c2efbc87c5832c1644c1eefbc3e4e3c17e1 Mon Sep 17 00:00:00 2001
From: Luke Denton <denno020@gmail.com>
Date: Tue, 8 Oct 2019 21:10:17 +1030
Subject: [PATCH] Version 1.2.1

---
 CHANGELOG.md                                  |  16 ++
 application-configuration.js                  |   2 +-
 package.json                                  |   2 +-
 src/App.css                                   |  10 +
 src/App.js                                    |   4 +
 src/App.vue                                   |  10 +-
 src/components/FAQ/FAQ.js                     |  36 +++
 src/components/FAQ/FAQ.vue                    |  68 +++++
 src/components/Footer/Footer.css              |  14 +
 src/components/Footer/Footer.vue              |   2 +-
 src/components/GetLink/GetLink.js             |   3 +
 src/components/GetLink/GetLink.vue            |   2 +-
 .../HowToUseDialog/HowToUseDialog.css         |  18 ++
 .../HowToUseDialog/HowToUseDialog.js          |  36 +++
 .../HowToUseDialog/HowToUseDialog.vue         | 102 +++++++
 src/components/Question/Question.js           |  21 ++
 src/components/Question/Question.vue          |  32 +++
 src/components/SVGIcon/SVGIcon.css            |  21 ++
 src/components/SVGIcon/SVGIcon.js             |  40 +++
 src/components/SVGIcon/SVGIcon.vue            |  24 ++
 src/components/SVGIcon/icons/shush.svg        | 264 ++++++++++++++++++
 src/components/SVGIcon/icons/wink.svg         | 210 ++++++++++++++
 src/components/index.js                       |   3 +
 src/modules/links.js                          |   1 -
 src/modules/ui.js                             |  35 ++-
 src/modules/urlString.js                      |   2 +
 src/utils/Ajax.js                             |   2 +-
 src/utils/Analytics.js                        |  41 +++
 src/utils/NetworkCalls.js                     |  14 +-
 src/utils/Performance.js                      |  48 ++++
 30 files changed, 1070 insertions(+), 13 deletions(-)
 create mode 100644 src/components/FAQ/FAQ.js
 create mode 100644 src/components/FAQ/FAQ.vue
 create mode 100644 src/components/HowToUseDialog/HowToUseDialog.css
 create mode 100644 src/components/HowToUseDialog/HowToUseDialog.js
 create mode 100644 src/components/HowToUseDialog/HowToUseDialog.vue
 create mode 100644 src/components/Question/Question.js
 create mode 100644 src/components/Question/Question.vue
 create mode 100644 src/components/SVGIcon/SVGIcon.css
 create mode 100644 src/components/SVGIcon/SVGIcon.js
 create mode 100644 src/components/SVGIcon/SVGIcon.vue
 create mode 100644 src/components/SVGIcon/icons/shush.svg
 create mode 100644 src/components/SVGIcon/icons/wink.svg
 create mode 100644 src/utils/Analytics.js
 create mode 100644 src/utils/Performance.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2a5e8cc..5b71e81 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,19 @@
+# 1.2.1
+
+**Added a loading indicator while the app generates an ID**
+
+Feedback is always nice when network requests are happening, so now the Get Link button will display a loading graphic while the application is generating an ID
+
+**Added a FAQ**
+
+Along with a single, lonesome question/answer
+
+**Added performance monitoring**
+
+One for me really, I will now be able to keep track of how long it takes to generate URL ID's
+
+# 1.2.0
+
 # 1.1.0
 
 ### Feature
diff --git a/application-configuration.js b/application-configuration.js
index 95ec8a7..1c8064a 100644
--- a/application-configuration.js
+++ b/application-configuration.js
@@ -38,5 +38,5 @@ export default {
     "databaseURL": "{Enter databaseURL}",
     "projectId": "{Enter projectID}"
   },
-  version: '1.1.0'
+  version: '1.2.1'
 };
diff --git a/package.json b/package.json
index d4bac16..e9601f6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "linkslist",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "licence": "GNU General Public Licence",
   "private": true,
   "scripts": {
diff --git a/src/App.css b/src/App.css
index 027bdf5..3446555 100644
--- a/src/App.css
+++ b/src/App.css
@@ -31,3 +31,13 @@
     margin: 0;
     width: 100%;
 }
+
+.empty-links-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.empty-links-list__item {
+    margin-bottom: 20px;
+}
diff --git a/src/App.js b/src/App.js
index a7c694e..de52ea6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,8 +19,10 @@
 import {
   Alerts,
   Card,
+  FAQ,
   Footer,
   GetLink,
+  HowToUseDialog,
   Toolbar,
   ViewContainer
 } from './components';
@@ -30,8 +32,10 @@ export default {
   components: {
     Alerts,
     Card,
+    FAQ,
     Footer,
     GetLink,
+    HowToUseDialog,
     Toolbar,
     ViewContainer
   },
diff --git a/src/App.vue b/src/App.vue
index ab2481a..352afc3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,9 +60,13 @@
                 <Card :link="link" />
               </li>
             </ul>
-            <span v-else class="font-weight-light">
-              Enter URLs into the input box above
-            </span>
+            <div v-else class="empty-links-list">
+              <div class="empty-links-list__item font-weight-light">
+                Enter URLs into the input box above
+              </div>
+              <HowToUseDialog class="empty-links-list__item"/>
+              <FAQ class="empty-links-list__item"/>
+            </div>
           </v-layout>
         </v-layout>
       </v-container>
diff --git a/src/components/FAQ/FAQ.js b/src/components/FAQ/FAQ.js
new file mode 100644
index 0000000..2c935b7
--- /dev/null
+++ b/src/components/FAQ/FAQ.js
@@ -0,0 +1,36 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import Question from '../Question/Question.vue';
+
+export default {
+    name: "FAQ",
+    components: {
+        Question
+    },
+    data () {
+        return {
+            dialog: false
+        }
+    },
+    computed: {
+        theme() {
+            return this.$store.getters['ui/theme'];
+        }
+    }
+}
diff --git a/src/components/FAQ/FAQ.vue b/src/components/FAQ/FAQ.vue
new file mode 100644
index 0000000..310297c
--- /dev/null
+++ b/src/components/FAQ/FAQ.vue
@@ -0,0 +1,68 @@
+<!--
+  -  Links List - Create a list of links, and then share it!
+  -  Copyright (c) 2019 Luke Denton
+  -
+  -  This program is free software: you can redistribute it and/or modify
+  -  it under the terms of the GNU General Public License as published by
+  -  the Free Software Foundation; either version 3 of the License, or
+  -  (at your option) any later version.
+  -
+  -  This program is distributed in the hope that it will be useful,
+  -  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  -  GNU General Public License for more details.
+  -
+  -  You should have received a copy of the GNU General Public License
+  -  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+    <v-dialog
+        v-model="dialog"
+        width="700"
+    >
+        <v-btn slot="activator" class="privacy-policy-link">FAQ</v-btn>
+
+        <v-card>
+            <v-card-title class="headline white--text" :class="theme" primary-title>
+                Frequently Asked Questions
+            </v-card-title>
+
+            <v-card-text>
+                <v-expansion-panel>
+                    <Question>
+                        <template slot="question">
+                            Can I import my Chrome, Firefox, Safari bookmarks?
+                        </template>
+                        <template slot="answer">
+                            Yes! If you can export your bookmarks into a HTML or similar text file, then you can import those links into your Links List. Here's how
+                            <ol>
+                                <li>Open your exported bookmarks file in a text edit</li>
+                                <li>Copy <em>all</em> of the text in that file</li>
+                                <li>Go to Links List and paste the clipboard contents into the link input field</li>
+                                <li>Click on the Add button!</li>
+                            </ol>
+                            This works because Links List will parse all of the text in the input field, looking for links. When it finds one, it will
+                            update the count on the Add button, so you know exactly how many links it has found, and is about to add
+                        </template>
+                    </Question>
+                </v-expansion-panel>
+            </v-card-text>
+
+            <v-divider></v-divider>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    :color="theme"
+                    flat
+                    @click="dialog = false"
+                >
+                    Close
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script src="./FAQ.js"></script>
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
index ffc91ff..5abb578 100644
--- a/src/components/Footer/Footer.css
+++ b/src/components/Footer/Footer.css
@@ -28,3 +28,17 @@
     transition: border-bottom linear 200ms;
     will-change: border-bottom;
 }
+
+@media (max-width: 720px) {
+    .v-footer {
+        flex-direction: column;
+    }
+}
+
+.links-container {
+    align-content: center;
+}
+
+.privacy-policy-link-container {
+    display: flex;
+}
diff --git a/src/components/Footer/Footer.vue b/src/components/Footer/Footer.vue
index c38e2f1..5730b4e 100644
--- a/src/components/Footer/Footer.vue
+++ b/src/components/Footer/Footer.vue
@@ -17,7 +17,7 @@
   -->
 
 <template>
-  <v-footer :color="theme" app class="pl-2 pr-2 white--text">
+  <v-footer :color="theme" app class="pl-2 pr-2 white--text" height="auto">
     <v-layout xs-3 class="links-container">
       <div class="version" itemprop="softwareVersion">
         <a class="white--text" href="https://github.com/denno020/linkslist/blob/master/CHANGELOG.md" target="_blank" rel="nofollow noopener">Version {{this.applicationVersion}}</a>
diff --git a/src/components/GetLink/GetLink.js b/src/components/GetLink/GetLink.js
index f735b6d..6dbb48a 100644
--- a/src/components/GetLink/GetLink.js
+++ b/src/components/GetLink/GetLink.js
@@ -29,6 +29,9 @@ export default {
     },
     theme() {
       return this.$store.getters['ui/theme'];
+    },
+    isLoading() {
+      return this.$store.getters['ui/isGettingId'];
     }
   },
   methods: {
diff --git a/src/components/GetLink/GetLink.vue b/src/components/GetLink/GetLink.vue
index 0d240c8..acf2eee 100644
--- a/src/components/GetLink/GetLink.vue
+++ b/src/components/GetLink/GetLink.vue
@@ -18,7 +18,7 @@
 
 <template>
   <v-layout justify-center shrink>
-    <v-btn v-if="!urlString" :color="theme" class="white--text" @click="handleGetLink">
+    <v-btn v-if="!urlString" :color="theme" class="white--text" @click="handleGetLink" :loading="isLoading">
       <v-icon class="mr-2">link</v-icon>
       Get link
     </v-btn>
diff --git a/src/components/HowToUseDialog/HowToUseDialog.css b/src/components/HowToUseDialog/HowToUseDialog.css
new file mode 100644
index 0000000..a463f7d
--- /dev/null
+++ b/src/components/HowToUseDialog/HowToUseDialog.css
@@ -0,0 +1,18 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
diff --git a/src/components/HowToUseDialog/HowToUseDialog.js b/src/components/HowToUseDialog/HowToUseDialog.js
new file mode 100644
index 0000000..f5df1b6
--- /dev/null
+++ b/src/components/HowToUseDialog/HowToUseDialog.js
@@ -0,0 +1,36 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import SVGIcon from '../SVGIcon/SVGIcon.vue';
+
+export default {
+  name: "HowToUseDialog",
+  components: {
+    SVGIcon
+  },
+  data () {
+    return {
+      dialog: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.getters['ui/theme'];
+    }
+  }
+}
diff --git a/src/components/HowToUseDialog/HowToUseDialog.vue b/src/components/HowToUseDialog/HowToUseDialog.vue
new file mode 100644
index 0000000..2fd31bf
--- /dev/null
+++ b/src/components/HowToUseDialog/HowToUseDialog.vue
@@ -0,0 +1,102 @@
+<!--
+  -  Links List - Create a list of links, and then share it!
+  -  Copyright (c) 2019 Luke Denton
+  -
+  -  This program is free software: you can redistribute it and/or modify
+  -  it under the terms of the GNU General Public License as published by
+  -  the Free Software Foundation; either version 3 of the License, or
+  -  (at your option) any later version.
+  -
+  -  This program is distributed in the hope that it will be useful,
+  -  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  -  GNU General Public License for more details.
+  -
+  -  You should have received a copy of the GNU General Public License
+  -  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="700"
+  >
+    <a href="#" slot="activator" class="privacy-policy-link">What can I create a list of?</a>
+
+    <v-card>
+      <v-card-title
+        class="headline white--text"
+        :class="theme"
+        primary-title
+      >
+        What can I create a list of?
+      </v-card-title>
+
+      <v-card-text>
+        <p>
+          Well, anything you like! Provided it's a URL. Random text that doesn't <em>look</em> like a URL, won't be added.
+        </p>
+        <h2 class="font-weight-light">Wishlists</h2>
+        <p>
+          Help your family/friends with their online shopping for a gift for you by creating a collection of links to products/
+          online services that you'd love as a gift. They will be able to open these links, and secretly purchase <SVGIcon icon="shush"/>
+        </p>
+        <h3 class="font-weight-light">eBay Wishlist</h3>
+        <p>
+          Fill the hole in your eBay experience and create a wishlist of eBay items that you would like to share. It might seem
+          like eBay already has this feature, but as of writing this, there is no way to share a collection of items in eBay, using
+          eBay itself.
+        </p>
+        <h3 class="font-weight-light">Etsy Wishlist</h3>
+        <p>
+          Etsy also doesn't have the ability to create, nor therefore share, a wishlist! Links List will allow you to add links
+          to any Etsy listing, and save it to a shareable wishlist.
+        </p>
+        <p>
+          Advanced users can even create a wishlist that has both eBay <em>and</em> Etsy listings on them <SVGIcon icon="wink"/>, as well as
+          absolutely any other online store.
+        </p>
+
+        <h2 class="font-weight-light">List of links to review</h2>
+        <p>
+          Ever get caught looking through the <a href="https://www.reddit.com/r/aww" target="_blank" rel="noreferrer nofollow">/aww</a> subreddit, and got a bit carried away with the number of links that you
+          share to your significant other? I certainly have. With Links List, you can now copy the link to each subreddit
+          post into a new list, and share just the lists’ link. Even after sharing the link, you can still add more items,
+          as every addition/removal is still made, even after the Get Link button is clicked. As your partner goes through
+          each link in the list, they can remove them, essentially crossing off the item as done.
+        </p>
+
+        <h2 class="font-weight-light">Parse Plain Text Links</h2>
+        <p>
+          Another use case for Links List is to take a list of raw text URL's, and convert them to a clickable link! Nothing
+          is more arduous than having to copy a URL, open a new browser tab, paste the URL, and then hit enter. Swapping your hands
+          between keyboard and mouse for every step is a good way to get Repetitive Strain Injury (RSI). Instead, copy <em>all</em>
+          of your raw text links in a single go, then paste that into the Links List input. The Add button will update to indicate
+          how many links have been detected in that paste, and you can click the Add button (or hit enter directly after pasting),
+          to create your list.
+        </p>
+        <p>
+          It's unlikely you'll be sharing this list, but you can if you wanted!
+        </p>
+
+
+      </v-card-text>
+
+      <v-divider></v-divider>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          :color="theme"
+          flat
+          @click="dialog = false"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script src="./HowToUseDialog.js"></script>
+<style scoped src="./HowToUseDialog.css"></style>
diff --git a/src/components/Question/Question.js b/src/components/Question/Question.js
new file mode 100644
index 0000000..0063bb9
--- /dev/null
+++ b/src/components/Question/Question.js
@@ -0,0 +1,21 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export default {
+    name: "Question"
+}
diff --git a/src/components/Question/Question.vue b/src/components/Question/Question.vue
new file mode 100644
index 0000000..84cc683
--- /dev/null
+++ b/src/components/Question/Question.vue
@@ -0,0 +1,32 @@
+<!--
+  -  Links List - Create a list of links, and then share it!
+  -  Copyright (c) 2019 Luke Denton
+  -
+  -  This program is free software: you can redistribute it and/or modify
+  -  it under the terms of the GNU General Public License as published by
+  -  the Free Software Foundation; either version 3 of the License, or
+  -  (at your option) any later version.
+  -
+  -  This program is distributed in the hope that it will be useful,
+  -  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  -  GNU General Public License for more details.
+  -
+  -  You should have received a copy of the GNU General Public License
+  -  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+    <v-expansion-panel-content>
+        <template slot="header">
+            <strong><slot name="question"></slot></strong>
+        </template>
+        <v-card>
+            <v-card-text>
+                <slot name="answer"></slot>
+            </v-card-text>
+        </v-card>
+    </v-expansion-panel-content>
+</template>
+
+<script src="./Question.js"></script>
diff --git a/src/components/SVGIcon/SVGIcon.css b/src/components/SVGIcon/SVGIcon.css
new file mode 100644
index 0000000..90b7472
--- /dev/null
+++ b/src/components/SVGIcon/SVGIcon.css
@@ -0,0 +1,21 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+.svg-icon {
+    height: 1.5em;
+}
diff --git a/src/components/SVGIcon/SVGIcon.js b/src/components/SVGIcon/SVGIcon.js
new file mode 100644
index 0000000..abd574d
--- /dev/null
+++ b/src/components/SVGIcon/SVGIcon.js
@@ -0,0 +1,40 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import iconWink from './icons/wink.svg';
+import iconShush from './icons/shush.svg';
+
+export default {
+  name: "SVGIcon",
+  props: [
+    'icon'
+  ],
+  data () {
+    return {
+      icons: {
+        shush: iconShush,
+        wink: iconWink
+      }
+    }
+  },
+  methods: {
+    getIcon () {
+      return this.icons[this.icon];
+    }
+  }
+}
diff --git a/src/components/SVGIcon/SVGIcon.vue b/src/components/SVGIcon/SVGIcon.vue
new file mode 100644
index 0000000..53f25e6
--- /dev/null
+++ b/src/components/SVGIcon/SVGIcon.vue
@@ -0,0 +1,24 @@
+<!--
+  -  Links List - Create a list of links, and then share it!
+  -  Copyright (c) 2019 Luke Denton
+  -
+  -  This program is free software: you can redistribute it and/or modify
+  -  it under the terms of the GNU General Public License as published by
+  -  the Free Software Foundation; either version 3 of the License, or
+  -  (at your option) any later version.
+  -
+  -  This program is distributed in the hope that it will be useful,
+  -  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  -  GNU General Public License for more details.
+  -
+  -  You should have received a copy of the GNU General Public License
+  -  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <img class="svg-icon" :src="getIcon()" alt="">
+</template>
+
+<script src="./SVGIcon.js"></script>
+<style scoped src="./SVGIcon.css"></style>
diff --git a/src/components/SVGIcon/icons/shush.svg b/src/components/SVGIcon/icons/shush.svg
new file mode 100644
index 0000000..2f7c0f2
--- /dev/null
+++ b/src/components/SVGIcon/icons/shush.svg
@@ -0,0 +1,264 @@
+
+<svg width="128" height="128" style="enable-background:new 0 0 128 128;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol id="Grid" viewBox="-64.5 -64.5 129 129">
+        <g id="XMLID_102_">
+            <rect id="XMLID_110_" height="128" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;" width="128" x="-64" y="-64"/>
+            <path id="XMLID_109_" d="M36.95,37.82C27.32,46.32,14.2,51,0,51 c-14.27,0-27.39-4.62-36.96-13.01C-47.45,28.79-53,15.65-53,0c0-15.58,5.55-28.69,16.04-37.92C-27.36-46.35-14.24-51,0-51 c14.17,0,27.29,4.71,36.95,13.25C47.45-28.45,53-15.4,53,0C53,15.47,47.45,28.55,36.95,37.82z" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;"/>
+            <path id="XMLID_108_" d="M0,55L0,55L0,55c-29.59,0-57-19.01-57-55 c0-35.8,27.41-55,57-55h0h0c29.59,0,57,19.69,57,55C57,35.51,29.59,55,0,55z" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;"/>
+            <path id="XMLID_107_" d="M0-43c-12.29,0-23.54,3.94-31.68,11.09 C-40.39-24.25-45-13.21-45,0c0,29.7,22.6,43,45,43c21.67,0,45-13.46,45-43S21.67-43,0-43L0-43z" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;"/>
+            <line id="XMLID_106_" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;" x1="-0.01" x2="-0.01" y1="51" y2="-51"/>
+            <line id="XMLID_105_" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;" x1="-16" x2="-16" y1="48.95" y2="-48.93"/>
+            <line id="XMLID_104_" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;" x1="15.99" x2="15.99" y1="48.91" y2="-48.93"/>
+            <line id="XMLID_103_" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;" x1="53" x2="-53" y1="0.08" y2="0.08"/>
+        </g>
+    </symbol>
+    <g id="Layer_1">
+        <g>
+            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="63.9915" x2="63.9915" y1="19.7166" y2="107.7021">
+                <stop offset="0.5" style="stop-color:#FEE133"/>
+                <stop offset="0.6118" style="stop-color:#FEDE32"/>
+                <stop offset="0.7076" style="stop-color:#FCD32F"/>
+                <stop offset="0.7975" style="stop-color:#FAC12B"/>
+                <stop offset="0.8834" style="stop-color:#F7A924"/>
+                <stop offset="0.9" style="stop-color:#F6A323"/>
+            </linearGradient>
+            <path d="M63.99,119.89c-27.93,0-58-17.49-58-55.89s30.07-55.89,58-55.89 c15.48,0,29.81,5.12,40.36,14.43c11.54,10.19,17.64,24.52,17.64,41.46c0,16.86-6.1,31.17-17.64,41.39 C93.78,114.74,79.44,119.89,63.99,119.89z" style="fill:url(#SVGID_1_);"/>
+            <path d="M63.99,10.11L63.99,10.11c14.99,0,28.86,4.95,39.03,13.93c11.1,9.8,16.97,23.61,16.97,39.96 c0,16.27-5.87,30.07-16.97,39.89c-10.21,9.03-24.07,14-39.03,14c-15.04,0-28.9-4.91-39.04-13.82C13.86,94.32,7.99,80.46,7.99,64 c0-16.54,5.86-30.42,16.96-40.15C35.06,14.99,48.92,10.11,63.99,10.11 M63.99,6.11L63.99,6.11L63.99,6.11L63.99,6.11 c-31.15,0-60,20.01-60,57.89c0,37.68,28.85,57.89,60,57.89h0h0h0c31.15,0,60-20.73,60-57.89C123.99,26.63,95.14,6.11,63.99,6.11 L63.99,6.11z" style="fill:#EB8F00;"/>
+        </g>
+        <g>
+            <path d="M85.85,32.94c-0.04-0.02-0.09-0.03-0.13-0.05 c-2.09-0.68-1.74-3.88,0.69-3.6c1.89,0.25,3.8,0.8,5.64,1.66c5.05,2.33,8.82,6.54,10.58,11.1c0.85,2.29-2.19,3.42-3.33,1.54 C96.33,38.85,91.56,34.91,85.85,32.94z" style="fill:#EB8F00;stroke:#EB8F00;stroke-miterlimit:10;"/>
+            <path d="M42.15,32.94c0.04-0.02,0.09-0.03,0.13-0.05 c2.09-0.68,1.74-3.88-0.69-3.6c-1.89,0.25-3.8,0.8-5.64,1.66c-5.05,2.33-8.82,6.54-10.58,11.1c-0.85,2.29,2.19,3.42,3.33,1.54 C31.67,38.85,36.44,34.91,42.15,32.94z" style="fill:#EB8F00;stroke:#EB8F00;stroke-miterlimit:10;"/>
+        </g>
+        <ellipse cx="64" cy="80.38" rx="12.3" ry="11.95" style="fill:#242424;"/>
+        <g>
+            <defs>
+                <rect id="SVGID_3_" height="120" width="120" x="4" y="4"/>
+            </defs>
+            <clipPath id="SVGID_4_">
+                <use style="overflow:visible;" xlink:href="#SVGID_3_"/>
+            </clipPath>
+            <g style="clip-path:url(#SVGID_4_);">
+                <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="31.7676" x2="38.3635" y1="87.8609" y2="104.9004">
+                    <stop offset="0.5" style="stop-color:#FEE133"/>
+                    <stop offset="0.6118" style="stop-color:#FEDE32"/>
+                    <stop offset="0.7076" style="stop-color:#FCD32F"/>
+                    <stop offset="0.7975" style="stop-color:#FAC12B"/>
+                    <stop offset="0.8834" style="stop-color:#F7A924"/>
+                    <stop offset="0.9" style="stop-color:#F6A323"/>
+                </linearGradient>
+                <path d="M30.37,86.73 c0,0,9.43-2.48,11.39,6.07l1.14,8.5c0.89,3.34,0.66,6.75-3.34,7.49l-0.49,0.62c-4,0.74-7.52-0.17-8.41-3.51l-3.02-7.54 C26.74,95.02,25.44,89.21,30.37,86.73z" style="fill:url(#SVGID_5_);stroke:#EB8F00;stroke-width:4;stroke-miterlimit:10;"/>
+                <linearGradient id="SVGID_6_" gradientTransform="matrix(0.9989 0.0466 -0.0466 0.9989 3.6638 -2.8017)" gradientUnits="userSpaceOnUse" x1="63.7783" x2="63.7783" y1="67.5253" y2="107.4675">
+                    <stop offset="0.5" style="stop-color:#FEE133"/>
+                    <stop offset="0.6118" style="stop-color:#FEDE32"/>
+                    <stop offset="0.7076" style="stop-color:#FCD32F"/>
+                    <stop offset="0.7975" style="stop-color:#FAC12B"/>
+                    <stop offset="0.8834" style="stop-color:#F7A924"/>
+                    <stop offset="0.9" style="stop-color:#F6A323"/>
+                </linearGradient>
+                <path d=" M72.81,115.7c-0.5-1.43-0.98-2.63-0.95-3.79c0.07-2.44,0.17-37.14,0.17-37.14c0.11-4.08,0.27-8.83-4.54-9 c-4.81-0.16-9.71,2.75-10.78,9.12c-1.07,6.36,1.39,28.45,1.39,28.45c-0.76,1.71-5.05,3.59-6.58,4.37 c2.92,1.11,10.27,1.78,12.77,3.64C67.1,112.94,69.92,114.38,72.81,115.7z" style="fill:url(#SVGID_6_);stroke:#EB8F00;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"/>
+                <path d="M38.84,129.49c-0.75-0.09-1.74-0.82-1.74-1.45l-0.29-7.92c0-0.63,1.29-1.89,2.05-1.98 c0.92-0.11,2.31,1.07,2.31,1.82l-0.29,8C40.87,128.7,39.75,129.6,38.84,129.49z" style="fill:#EDA600;"/>
+                <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="50.9699" x2="50.9699" y1="91.44" y2="156.4955">
+                    <stop offset="0.3779" style="stop-color:#FEE133"/>
+                    <stop offset="0.5239" style="stop-color:#FEDE32"/>
+                    <stop offset="0.6489" style="stop-color:#FCD32F"/>
+                    <stop offset="0.7663" style="stop-color:#FAC12B"/>
+                    <stop offset="0.8783" style="stop-color:#F7A924"/>
+                    <stop offset="0.9" style="stop-color:#F6A323"/>
+                </linearGradient>
+                <path d="M69.28,100.01 c-11.2-7.84-22.78-9.11-32.65-2.47c-7.51,5.06-11.32,7.85-13.48,14.42c-2.36,7.22,1.6,10.14,1.71,13.29 c0.19,5.69,6.61,7.84,6.83,8.73c0.81,3.2-1.37,9.47,5.12,16.89c9.3,10.63,30.96,5.1,36.44-1.14 C80.1,141.96,84.46,110.64,69.28,100.01z" style="fill:url(#SVGID_7_);stroke:#EB8F00;stroke-width:4;stroke-miterlimit:10;"/>
+                <radialGradient id="SVGID_8_" cx="47.76" cy="97.4312" gradientTransform="matrix(1.1638 0.2342 -0.3789 1.3142 27.0845 -41.7962)" gradientUnits="userSpaceOnUse" r="0">
+                    <stop offset="0" style="stop-color:#FFB300"/>
+                    <stop offset="0.6888" style="stop-color:#FFCA28"/>
+                    <stop offset="1" style="stop-color:#FFB300"/>
+                </radialGradient>
+                <path d="M45.75,97.43" style="fill:url(#SVGID_8_);"/>
+                <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="25.522" x2="45.1756" y1="118.0457" y2="118.0457">
+                    <stop offset="0.3779" style="stop-color:#FEE133"/>
+                    <stop offset="0.9565" style="stop-color:#FEE133"/>
+                    <stop offset="1" style="stop-color:#FEE133"/>
+                </linearGradient>
+                <path d=" M45.18,104.76c-6.19,1.82-17.1,9.99-18.98,14.42c-0.81,1.9-0.83,4.63-0.38,6.64c0.61,2.74,1.38,4.62,4.93,5.5" style="fill:url(#SVGID_9_);stroke:#EB8F00;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"/>
+                <path d="M28.68,107.49c-0.74,0-4.95,19.43-4.95,19.43l11.63,14.67l13.48-7.39l6.02-21.32l4.37-0.66 l-0.27-1.91l1.56-7.77l-28.62-1.25L28.68,107.49z" style="fill:none;"/>
+                <path d=" M54.67,113.87c-12.06,0.58-27.71,10.63-21.07,22.02c1.29,2.21,1.71,4.37,7.21,3.8c4.53-0.47,4.93-12.72,12.72-10.82 c-5.12,2.66-5.69,14.24-0.38,16.7" style="fill:none;stroke:#EB8F00;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"/>
+                <path d="M29.42,122.22l14.12-13.13l24.29,4.03l3.83,3.58l-2.12,3.36l-12.2,5.48 c1.08,0.25,6.57,31.72-7.61,28.48c-4.17-0.95-22.9-15.83-22.9-15.83L29.42,122.22z" style="fill:none;"/>
+            </g>
+        </g>
+        <path d="M44.67,41.19L44.67,41.19c-4.19,0-8,3.54-8,9.42s3.81,9.42,8,9.42l0,0c4.19,0,8-3.54,8-9.42 S48.86,41.19,44.67,41.19z" style="fill:#242424;"/>
+        <path d="M83.33,41.19L83.33,41.19c-4.19,0-8,3.54-8,9.42s3.81,9.42,8,9.42l0,0c4.19,0,8-3.54,8-9.42 S87.52,41.19,83.33,41.19z" style="fill:#242424;"/>
+    </g>
+    <g id="Layer_2" style="display:none;">
+        <g style="display:inline;">
+            <g style="opacity:0.6;">
+                <circle cx="64" cy="64" r="28" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2625;stroke-miterlimit:10;"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="84" x2="84" y1="0" y2="128"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="44" x2="44" y1="0" y2="128"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="64" x2="64" y1="0" y2="128"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="64" y2="64"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="44" y2="44"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="83.75" y2="83.75"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="128" y2="0"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="0" x2="128" y1="128" y2="0"/>
+                <g style="opacity:0.61;">
+                    <path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/>
+                </g>
+                <path d="M107.97,115.97H20.03 c-4.42,0-8.03-3.61-8.03-8.03V20.03c0-4.42,3.61-8.03,8.03-8.03h87.94c4.42,0,8.03,3.61,8.03,8.03v87.91 C116,112.36,112.39,115.97,107.97,115.97z" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2578;stroke-miterlimit:10;"/>
+                <path d="M100,124H28c-4.4,0-8-3.6-8-8 V12c0-4.4,3.6-8,8-8h72c4.4,0,8,3.6,8,8v104C108,120.4,104.4,124,100,124z" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2628;stroke-miterlimit:10;"/>
+                <path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2627;stroke-miterlimit:10;"/>
+            </g>
+            <g>
+                <g style="opacity:0.2;">
+                    <defs>
+                        <rect id="SVGID_2_" height="128" style="opacity:0.2;" width="128" x="0" y="0"/>
+                    </defs>
+                    <clipPath id="SVGID_10_">
+                        <use style="overflow:visible;" xlink:href="#SVGID_2_"/>
+                    </clipPath>
+                    <g style="clip-path:url(#SVGID_10_);">
+                        <g>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-28" x2="-28" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-24" x2="-24" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-20" x2="-20" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-16" x2="-16" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-12" x2="-12" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-8" x2="-8" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-4" x2="-4" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="0" x2="0" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="4" x2="4" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="8" x2="8" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="12" x2="12" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="16" x2="16" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="20" x2="20" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="24" x2="24" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="28" x2="28" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="32" x2="32" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="36" x2="36" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="40" x2="40" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="44" x2="44" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="48" x2="48" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="52" x2="52" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="56" x2="56" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="60" x2="60" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="64" x2="64" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="68" x2="68" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="72" x2="72" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="76" x2="76" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="80" x2="80" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="84" x2="84" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="88" x2="88" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="92" x2="92" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="96" x2="96" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="100" x2="100" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="104" x2="104" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="108" x2="108" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="112" x2="112" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="116" x2="116" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="120" x2="120" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="124" x2="124" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="128" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="132" x2="132" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="136" x2="136" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="137" x2="137" y1="166.05" y2="-25.95"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="144" x2="144" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="148" x2="148" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="152" x2="152" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="156" x2="156" y1="160" y2="-32"/>
+                        </g>
+                        <g>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-28" y2="-28"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-24" y2="-24"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-20" y2="-20"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-16" y2="-16"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-12" y2="-12"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-8" y2="-8"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-4" y2="-4"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="0" y2="0"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="4" y2="4"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="8" y2="8"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="12" y2="12"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="16" y2="16"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="20" y2="20"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="24" y2="24"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="28" y2="28"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="32" y2="32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="36" y2="36"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="40" y2="40"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="44" y2="44"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="48" y2="48"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="52" y2="52"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="56" y2="56"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="60" y2="60"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="64" y2="64"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="68" y2="68"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="72" y2="72"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="76" y2="76"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="80" y2="80"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="84" y2="84"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="88" y2="88"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="92" y2="92"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="96" y2="96"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="100" y2="100"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="104" y2="104"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="108" y2="108"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="112" y2="112"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="116" y2="116"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="120" y2="120"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="124" y2="124"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="128" y2="128"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="132" y2="132"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="136" y2="136"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="140" y2="140"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="144" y2="144"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="148" y2="148"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="152" y2="152"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="156" y2="156"/>
+                        </g>
+                        <path d="M159.75-31.75v191.5h-191.5v-191.5H159.75 M160-32H-32v192h192V-32L160-32z"/>
+                    </g>
+                </g>
+                <g>
+                    <rect height="128" style="opacity:0.3;fill:#F44336;" width="4" x="0" y="0"/>
+                    <rect height="128" style="opacity:0.3;fill:#F44336;" width="4" x="124" y="0"/>
+                    <rect height="120" style="opacity:0.3;fill:#F44336;" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 66 -62)" width="4" x="62" y="-58"/>
+                    <rect height="120" style="opacity:0.3;fill:#F44336;" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 190 62)" width="4" x="62" y="66"/>
+                </g>
+            </g>
+        </g>
+    </g>
+    <g id="Layer_3" style="display:none;">
+        <rect id="XMLID_46_" height="128" style="display:inline;fill:none;stroke:#616161;stroke-width:0.25;stroke-miterlimit:10;" transform="matrix(-1.346904e-10 -1 1 -1.346904e-10 8.631098e-09 128)" width="128" x="0"/>
+        <g id="XMLID_9_" style="display:inline;">
+            <rect id="XMLID_45_" height="128" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" width="128" x="0"/>
+            <line id="XMLID_44_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="8" x2="8" y1="0" y2="128"/>
+            <line id="XMLID_43_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="16" x2="16" y1="0" y2="128"/>
+            <line id="XMLID_42_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="24" x2="24" y1="0" y2="128"/>
+            <line id="XMLID_41_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="32" x2="32" y1="0" y2="128"/>
+            <line id="XMLID_40_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="40" x2="40" y1="0" y2="128"/>
+            <line id="XMLID_39_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="48" x2="48" y1="0" y2="128"/>
+            <line id="XMLID_38_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="56" x2="56" y1="0" y2="128"/>
+            <line id="XMLID_37_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="63.99" x2="63.99" y1="0" y2="128"/>
+            <line id="XMLID_36_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="71.99" x2="71.99" y1="0" y2="128"/>
+            <line id="XMLID_35_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="79.99" x2="79.99" y1="0" y2="128"/>
+            <line id="XMLID_34_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="87.99" x2="87.99" y1="0" y2="128"/>
+            <line id="XMLID_33_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="95.99" x2="95.99" y1="0" y2="128"/>
+            <line id="XMLID_32_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="103.99" x2="103.99" y1="0" y2="128"/>
+            <line id="XMLID_47_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="111.99" x2="111.99" y1="0" y2="128"/>
+            <line id="XMLID_48_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="119.99" x2="119.99" y1="0" y2="128"/>
+            <line id="XMLID_49_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="120" y2="120"/>
+            <line id="XMLID_50_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="112" y2="112"/>
+            <line id="XMLID_51_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="104" y2="104"/>
+            <line id="XMLID_52_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="96" y2="96"/>
+            <line id="XMLID_53_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="88" y2="88"/>
+            <line id="XMLID_54_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="80" y2="80"/>
+            <line id="XMLID_55_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="72" y2="72"/>
+            <line id="XMLID_56_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="64.01" y2="64.01"/>
+            <line id="XMLID_57_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="56.01" y2="56.01"/>
+            <line id="XMLID_58_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="48.01" y2="48.01"/>
+            <line id="XMLID_60_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="40.01" y2="40.01"/>
+            <line id="XMLID_61_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="32.01" y2="32.01"/>
+            <line id="XMLID_62_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="24.01" y2="24.01"/>
+            <line id="XMLID_63_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="16.01" y2="16.01"/>
+            <line id="XMLID_64_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="8.01" y2="8.01"/>
+        </g>
+        <use id="XMLID_31_" height="129" style="display:inline;overflow:visible;" transform="matrix(1 0 0 -1 64 64)" width="129" x="-64.5" xlink:href="#Grid" y="-64.5"/>
+    </g>
+</svg>
diff --git a/src/components/SVGIcon/icons/wink.svg b/src/components/SVGIcon/icons/wink.svg
new file mode 100644
index 0000000..0942b7a
--- /dev/null
+++ b/src/components/SVGIcon/icons/wink.svg
@@ -0,0 +1,210 @@
+<svg width="128" height="128" style="enable-background:new 0 0 128 128;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol id="Grid" viewBox="-64.5 -64.5 129 129">
+        <g id="XMLID_102_">
+            <rect id="XMLID_110_" height="128" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;" width="128" x="-64" y="-64"/>
+            <path id="XMLID_109_" d="M36.95,37.82C27.32,46.32,14.2,51,0,51 c-14.27,0-27.39-4.62-36.96-13.01C-47.45,28.79-53,15.65-53,0c0-15.58,5.55-28.69,16.04-37.92C-27.36-46.35-14.24-51,0-51 c14.17,0,27.29,4.71,36.95,13.25C47.45-28.45,53-15.4,53,0C53,15.47,47.45,28.55,36.95,37.82z" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;"/>
+            <path id="XMLID_108_" d="M0,55L0,55L0,55c-29.59,0-57-19.01-57-55 c0-35.8,27.41-55,57-55h0h0c29.59,0,57,19.69,57,55C57,35.51,29.59,55,0,55z" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;"/>
+            <path id="XMLID_107_" d="M0-43c-12.29,0-23.54,3.94-31.68,11.09 C-40.39-24.25-45-13.21-45,0c0,29.7,22.6,43,45,43c21.67,0,45-13.46,45-43S21.67-43,0-43L0-43z" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;"/>
+            <line id="XMLID_106_" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;" x1="-0.01" x2="-0.01" y1="51" y2="-51"/>
+            <line id="XMLID_105_" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;" x1="-16" x2="-16" y1="48.95" y2="-48.93"/>
+            <line id="XMLID_104_" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;" x1="15.99" x2="15.99" y1="48.91" y2="-48.93"/>
+            <line id="XMLID_103_" style="fill:none;stroke:#4285F4;stroke-miterlimit:10;" x1="53" x2="-53" y1="0.08" y2="0.08"/>
+        </g>
+    </symbol>
+    <g id="Layer_1">
+        <g>
+            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="64" x2="64" y1="19.7166" y2="107.7021">
+                <stop offset="0.5" style="stop-color:#FEE133"/>
+                <stop offset="0.6118" style="stop-color:#FEDE32"/>
+                <stop offset="0.7076" style="stop-color:#FCD32F"/>
+                <stop offset="0.7975" style="stop-color:#FAC12B"/>
+                <stop offset="0.8834" style="stop-color:#F7A924"/>
+                <stop offset="0.9" style="stop-color:#F6A323"/>
+            </linearGradient>
+            <path d="M64,119.89C36.07,119.89,6,102.4,6,64S36.07,8.11,64,8.11c15.48,0,29.81,5.12,40.36,14.43 C115.9,32.72,122,47.06,122,64c0,16.86-6.1,31.17-17.64,41.39C93.78,114.74,79.45,119.89,64,119.89z" style="fill:url(#SVGID_1_);"/>
+            <path d="M64,10.11L64,10.11c14.99,0,28.86,4.95,39.03,13.93C114.13,33.83,120,47.65,120,64 c0,16.27-5.87,30.07-16.97,39.89c-10.21,9.03-24.07,14-39.03,14c-15.04,0-28.9-4.91-39.04-13.82C13.86,94.32,8,80.46,8,64 c0-16.54,5.86-30.42,16.96-40.15C35.07,14.99,48.93,10.11,64,10.11 M64,6.11L64,6.11L64,6.11L64,6.11C32.85,6.11,4,26.11,4,64 c0,37.68,28.85,57.89,60,57.89h0h0h0c31.15,0,60-20.73,60-57.89C124,26.63,95.15,6.11,64,6.11L64,6.11z" style="fill:#EB8F00;"/>
+        </g>
+        <g>
+            <path d="M72.66,57.5c0,0,0.07-0.06,0.2-0.17c0.06-0.06,0.15-0.12,0.24-0.2c0.13-0.1,0.31-0.21,0.5-0.34 c0.39-0.25,0.77-0.49,1.27-0.73c0.49-0.25,1.05-0.49,1.67-0.7c1.24-0.45,2.71-0.76,4.28-0.91c1.57-0.16,3.24-0.08,4.89,0.12 c0.5,0.09,0.69,0.11,1.18,0.21c0.44,0.09,0.86,0.18,1.25,0.28c0.8,0.19,1.56,0.46,2.3,0.74c1.47,0.57,2.8,1.28,3.87,2.05 c1.08,0.75,1.89,1.55,2.42,2.17c0.27,0.3,0.46,0.57,0.59,0.75c0.13,0.18,0.2,0.28,0.2,0.28c0.88,1.23,0.59,2.94-0.64,3.81 c-0.98,0.7-2.27,0.66-3.2-0.02l-0.28-0.21c0,0-0.2-0.15-0.6-0.39c-0.39-0.24-0.98-0.58-1.76-0.94c-0.77-0.36-1.74-0.71-2.82-1.03 c-0.54-0.16-1.11-0.29-1.69-0.42c-0.3-0.07-0.57-0.12-0.84-0.17c-0.22-0.05-0.74-0.11-0.95-0.15c-1.21-0.18-2.42-0.25-3.55-0.25 c-1.12,0.01-2.15,0.09-2.99,0.22c-0.42,0.07-0.8,0.13-1.13,0.21c-0.32,0.07-0.63,0.16-0.8,0.2c-0.09,0.02-0.17,0.04-0.25,0.05 c-0.12,0.05-0.21,0.09-0.29,0.12c-0.16,0.06-0.24,0.1-0.24,0.1c-1.42,0.57-3.03-0.11-3.6-1.53C71.43,59.51,71.78,58.26,72.66,57.5 z" style="fill:#242424;"/>
+            <path d="M71.97,57.82c0,0,0.05-0.08,0.13-0.23c0.07-0.13,0.24-0.41,0.5-0.76c0.46-0.64,1.12-1.46,2-2.33 c0.87-0.88,1.93-1.81,3.13-2.7c0.6-0.44,1.22-0.9,1.88-1.31c0.67-0.43,1.3-0.81,2.04-1.25c0.62-0.33,1.36-0.73,2.06-1.08 c0.69-0.36,1.41-0.64,2.09-0.94c1.38-0.57,2.73-1,3.92-1.29c1.19-0.3,2.25-0.45,3.02-0.51c0.77-0.06,1.25-0.04,1.25-0.04 c1.52,0.06,2.71,1.34,2.65,2.86c-0.04,1.15-0.78,2.11-1.8,2.48l-0.22,0.08c0,0-0.28,0.1-0.76,0.28c-0.5,0.19-1.23,0.48-2.14,0.88 c-0.9,0.41-1.97,0.91-3.1,1.49c-0.57,0.3-1.15,0.61-1.75,0.92c-0.59,0.31-1.15,0.62-1.82,1.01c-0.55,0.3-1.18,0.67-1.75,1.01 c-0.57,0.35-1.14,0.69-1.69,1.03c-1.08,0.68-2.06,1.34-2.87,1.9c-0.81,0.57-1.44,1.06-1.85,1.38c-0.17,0.13-0.33,0.24-0.47,0.38 c-0.13,0.12-0.2,0.18-0.2,0.18c-1.13,1.03-2.88,0.94-3.91-0.19C71.5,60.14,71.4,58.83,71.97,57.82z" style="fill:#242424;"/>
+        </g>
+        <path d="M29.84,43.8c-0.89,0-1.7-0.41-2.18-1.11 c-0.48-0.69-0.56-1.56-0.24-2.44c1.94-5.01,5.94-9.21,10.99-11.54c1.88-0.87,3.85-1.45,5.86-1.72c0.15-0.02,0.27-0.02,0.4-0.02 c1.31,0,2.32,0.85,2.52,2.11c0.18,1.15-0.41,2.56-1.89,3.04l-0.38-0.71l0.26,0.75C39.85,34,35.1,37.76,32.15,42.48 C31.65,43.31,30.8,43.8,29.84,43.8L29.84,43.8z" style="fill:#EB8F00;stroke:#EB8F00;stroke-miterlimit:10;"/>
+        <path id="XMLID_2_" d="M64.25,94.44c-12.74,0-21.82-6.61-24.55-10.77c-1.06-1.61-1.26-3.35-0.55-4.67 c0.53-0.99,1.51-1.56,2.67-1.56c0.39,0,0.79,0.07,1.2,0.19c6.42,2.01,13.78,3.07,21.28,3.07c7.46,0,14.79-1.06,21.19-3.07 c0.41-0.13,0.81-0.19,1.2-0.19c1.16,0,2.14,0.57,2.67,1.56c0.71,1.31,0.5,3.06-0.55,4.67C86.07,87.83,76.99,94.44,64.25,94.44z" style="fill:#242424;"/>
+        <path d="M44.67,45.94L44.67,45.94c-4.19,0-8,3.54-8,9.42s3.81,9.42,8,9.42l0,0c4.19,0,8-3.54,8-9.42 S48.86,45.94,44.67,45.94z" style="fill:#242424;"/>
+    </g>
+    <g id="Layer_2" style="display:none;">
+        <g style="display:inline;">
+            <g style="opacity:0.6;">
+                <circle cx="64" cy="64" r="28" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2625;stroke-miterlimit:10;"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="84" x2="84" y1="0" y2="128"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="44" x2="44" y1="0" y2="128"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="64" x2="64" y1="0" y2="128"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="64" y2="64"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="44" y2="44"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="83.75" y2="83.75"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="128" y2="0"/>
+                <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="0" x2="128" y1="128" y2="0"/>
+                <g style="opacity:0.61;">
+                    <path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/>
+                </g>
+                <path d="M107.97,115.97H20.03 c-4.42,0-8.03-3.61-8.03-8.03V20.03c0-4.42,3.61-8.03,8.03-8.03h87.94c4.42,0,8.03,3.61,8.03,8.03v87.91 C116,112.36,112.39,115.97,107.97,115.97z" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2578;stroke-miterlimit:10;"/>
+                <path d="M100,124H28c-4.4,0-8-3.6-8-8 V12c0-4.4,3.6-8,8-8h72c4.4,0,8,3.6,8,8v104C108,120.4,104.4,124,100,124z" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2628;stroke-miterlimit:10;"/>
+                <path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2627;stroke-miterlimit:10;"/>
+            </g>
+            <g>
+                <g style="opacity:0.2;">
+                    <defs>
+                        <rect id="SVGID_2_" height="128" style="opacity:0.2;" width="128" x="0" y="0"/>
+                    </defs>
+                    <clipPath id="SVGID_3_">
+                        <use style="overflow:visible;" xlink:href="#SVGID_2_"/>
+                    </clipPath>
+                    <g style="clip-path:url(#SVGID_3_);">
+                        <g>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-28" x2="-28" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-24" x2="-24" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-20" x2="-20" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-16" x2="-16" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-12" x2="-12" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-8" x2="-8" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-4" x2="-4" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="0" x2="0" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="4" x2="4" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="8" x2="8" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="12" x2="12" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="16" x2="16" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="20" x2="20" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="24" x2="24" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="28" x2="28" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="32" x2="32" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="36" x2="36" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="40" x2="40" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="44" x2="44" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="48" x2="48" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="52" x2="52" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="56" x2="56" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="60" x2="60" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="64" x2="64" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="68" x2="68" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="72" x2="72" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="76" x2="76" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="80" x2="80" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="84" x2="84" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="88" x2="88" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="92" x2="92" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="96" x2="96" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="100" x2="100" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="104" x2="104" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="108" x2="108" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="112" x2="112" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="116" x2="116" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="120" x2="120" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="124" x2="124" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="128" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="132" x2="132" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="136" x2="136" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="137" x2="137" y1="166.05" y2="-25.95"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="144" x2="144" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="148" x2="148" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="152" x2="152" y1="160" y2="-32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="156" x2="156" y1="160" y2="-32"/>
+                        </g>
+                        <g>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-28" y2="-28"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-24" y2="-24"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-20" y2="-20"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-16" y2="-16"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-12" y2="-12"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-8" y2="-8"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-4" y2="-4"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="0" y2="0"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="4" y2="4"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="8" y2="8"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="12" y2="12"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="16" y2="16"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="20" y2="20"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="24" y2="24"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="28" y2="28"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="32" y2="32"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="36" y2="36"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="40" y2="40"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="44" y2="44"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="48" y2="48"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="52" y2="52"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="56" y2="56"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="60" y2="60"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="64" y2="64"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="68" y2="68"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="72" y2="72"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="76" y2="76"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="80" y2="80"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="84" y2="84"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="88" y2="88"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="92" y2="92"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="96" y2="96"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="100" y2="100"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="104" y2="104"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="108" y2="108"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="112" y2="112"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="116" y2="116"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="120" y2="120"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="124" y2="124"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="128" y2="128"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="132" y2="132"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="136" y2="136"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="140" y2="140"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="144" y2="144"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="148" y2="148"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="152" y2="152"/>
+                            <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="156" y2="156"/>
+                        </g>
+                        <path d="M159.75-31.75v191.5h-191.5v-191.5H159.75 M160-32H-32v192h192V-32L160-32z"/>
+                    </g>
+                </g>
+                <g>
+                    <rect height="128" style="opacity:0.3;fill:#F44336;" width="4" x="0" y="0"/>
+                    <rect height="128" style="opacity:0.3;fill:#F44336;" width="4" x="124" y="0"/>
+                    <rect height="120" style="opacity:0.3;fill:#F44336;" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 66 -62)" width="4" x="62" y="-58"/>
+                    <rect height="120" style="opacity:0.3;fill:#F44336;" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 190 62)" width="4" x="62" y="66"/>
+                </g>
+            </g>
+        </g>
+    </g>
+    <g id="Layer_3" style="display:none;">
+        <rect id="XMLID_46_" height="128" style="display:inline;fill:none;stroke:#616161;stroke-width:0.25;stroke-miterlimit:10;" transform="matrix(-1.346904e-10 -1 1 -1.346904e-10 8.631098e-09 128)" width="128" x="0"/>
+        <g id="XMLID_9_" style="display:inline;">
+            <rect id="XMLID_45_" height="128" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" width="128" x="0"/>
+            <line id="XMLID_44_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="8" x2="8" y1="0" y2="128"/>
+            <line id="XMLID_43_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="16" x2="16" y1="0" y2="128"/>
+            <line id="XMLID_42_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="24" x2="24" y1="0" y2="128"/>
+            <line id="XMLID_41_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="32" x2="32" y1="0" y2="128"/>
+            <line id="XMLID_40_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="40" x2="40" y1="0" y2="128"/>
+            <line id="XMLID_39_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="48" x2="48" y1="0" y2="128"/>
+            <line id="XMLID_38_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="56" x2="56" y1="0" y2="128"/>
+            <line id="XMLID_37_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="63.99" x2="63.99" y1="0" y2="128"/>
+            <line id="XMLID_36_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="71.99" x2="71.99" y1="0" y2="128"/>
+            <line id="XMLID_35_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="79.99" x2="79.99" y1="0" y2="128"/>
+            <line id="XMLID_34_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="87.99" x2="87.99" y1="0" y2="128"/>
+            <line id="XMLID_33_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="95.99" x2="95.99" y1="0" y2="128"/>
+            <line id="XMLID_32_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="103.99" x2="103.99" y1="0" y2="128"/>
+            <line id="XMLID_47_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="111.99" x2="111.99" y1="0" y2="128"/>
+            <line id="XMLID_48_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="119.99" x2="119.99" y1="0" y2="128"/>
+            <line id="XMLID_49_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="120" y2="120"/>
+            <line id="XMLID_50_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="112" y2="112"/>
+            <line id="XMLID_51_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="104" y2="104"/>
+            <line id="XMLID_52_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="96" y2="96"/>
+            <line id="XMLID_53_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="88" y2="88"/>
+            <line id="XMLID_54_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="80" y2="80"/>
+            <line id="XMLID_55_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="72" y2="72"/>
+            <line id="XMLID_56_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="64.01" y2="64.01"/>
+            <line id="XMLID_57_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="56.01" y2="56.01"/>
+            <line id="XMLID_58_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="48.01" y2="48.01"/>
+            <line id="XMLID_60_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="40.01" y2="40.01"/>
+            <line id="XMLID_61_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="32.01" y2="32.01"/>
+            <line id="XMLID_62_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="24.01" y2="24.01"/>
+            <line id="XMLID_63_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="16.01" y2="16.01"/>
+            <line id="XMLID_64_" style="fill:none;stroke:#E0E0E0;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="8.01" y2="8.01"/>
+        </g>
+        <use id="XMLID_31_" height="129" style="display:inline;overflow:visible;" transform="matrix(1 0 0 -1 64 64)" width="129" x="-64.5" xlink:href="#Grid" y="-64.5"/>
+    </g>
+</svg>
diff --git a/src/components/index.js b/src/components/index.js
index 07d73fe..4aacf81 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -20,8 +20,11 @@ export { default as Alert } from './Alert/Alert.vue';
 export { default as Alerts } from './Alerts/Alerts.vue';
 export { default as AnimatedEllipsis } from './AnimatedEllipsis/AnimatedEllipsis.vue';
 export { default as Card } from './Card/Card.vue';
+export { default as FAQ } from './FAQ/FAQ.vue';
 export { default as Footer } from './Footer/Footer.vue';
 export { default as GetLink } from './GetLink/GetLink.vue';
+export { default as HowToUseDialog } from './HowToUseDialog/HowToUseDialog.vue';
 export { default as PrivacyDialog } from './PrivacyDialog/PrivacyDialog.vue';
+export { default as Question } from './Question/Question.vue';
 export { default as Toolbar } from './Toolbar/Toolbar.vue';
 export { default as ViewContainer } from './ViewContainer/ViewContainer.vue';
diff --git a/src/modules/links.js b/src/modules/links.js
index 2b105d7..ae3bf8c 100644
--- a/src/modules/links.js
+++ b/src/modules/links.js
@@ -16,7 +16,6 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import LinkParser from '../utils/LinkParser';
 import { getUrlData, syncFirebaseDB } from '../utils/NetworkCalls';
 
 /**
diff --git a/src/modules/ui.js b/src/modules/ui.js
index d2f16b6..e21eceb 100644
--- a/src/modules/ui.js
+++ b/src/modules/ui.js
@@ -34,7 +34,8 @@ const state = {
       icon: 'view_headline'
     }
   },
-  theme: THEME_LIGHT_BLUE
+  theme: THEME_LIGHT_BLUE,
+  isGettingId: false
 };
 
 /**
@@ -67,7 +68,7 @@ const mutations = {
    * This function will mainly be used to populate the UI state with values that have been saved in the DB or localStorage
    *
    * @param {Object} state   The slice of state that this module is responsible for
-   * @param {Object} payload Object containing the UI values that are going to be upated
+   * @param {Object} payload Object containing the UI values that are going to be updated
    *
    * @returns {null}
    */
@@ -76,6 +77,20 @@ const mutations = {
       ...state,
       ...payload
     };
+  },
+
+  /**
+   * Set isGettingId
+   *
+   * @param {Object} state   The slice of state that this module is responsible for
+   * @param {Object} payload Object container the value to update
+   *
+   * @returns {null}
+   */
+  isGettingId(state, payload) {
+    const { isGettingId } = payload;
+
+    state.isGettingId = isGettingId;
   }
 };
 
@@ -110,6 +125,19 @@ const actions = {
    */
   setUi({ commit }, payload) {
     commit('setUi', payload);
+  },
+
+  /**
+   * Set the flag for isGettingId, indicating if the application has requested an ID
+   *
+   * @param {Object} module
+   * @param {Object} payload              Object containing property value to update
+   * @param {Boolean} payload.isGettingId Flag indicating if the application is currently querying for URL ID
+   *
+   * @returns {null}
+   */
+  setIsGettingId({ commit }, payload) {
+    commit('isGettingId', payload);
   }
 };
 
@@ -126,7 +154,8 @@ const getters = {
     // This is the data that will be saved to Firebase DB/localStorage
     const {theme, viewMode} = getters;
     return { theme, viewMode };
-  }
+  },
+  isGettingId: state => state.isGettingId
 };
 
 // Module exports
diff --git a/src/modules/urlString.js b/src/modules/urlString.js
index 7cde450..cd79b18 100644
--- a/src/modules/urlString.js
+++ b/src/modules/urlString.js
@@ -68,7 +68,9 @@ const actions = {
    * @returns {null}
    */
   async fetchUrlString({ dispatch }) {
+    dispatch('ui/setIsGettingId', { isGettingId: true });
     const id = await getLinkId();
+    dispatch('ui/setIsGettingId', { isGettingId: false });
     dispatch('urlString', id);
     history.pushState({}, id, id);
   }
diff --git a/src/utils/Ajax.js b/src/utils/Ajax.js
index 8bd4c53..90e8f52 100644
--- a/src/utils/Ajax.js
+++ b/src/utils/Ajax.js
@@ -31,7 +31,7 @@ export default class Ajax {
     return Http.post(url, data);
   }
 
-  static put() {
+  static put(url, data) {
     return Http.put(url, data);
   }
 }
diff --git a/src/utils/Analytics.js b/src/utils/Analytics.js
new file mode 100644
index 0000000..42bf862
--- /dev/null
+++ b/src/utils/Analytics.js
@@ -0,0 +1,41 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export default class Analytics {
+    /**
+     * Fire the user timing request to GA
+     *
+     * @param {string} name     The name of the timing event
+     * @param {number} time     The timing value
+     * @param {string} category The category of the timing event
+     *
+     * @returns {null}
+     */
+    static FireTiming(name, time, category = 'Performance') {
+        if (window.location.hostname === 'localhost') {
+            console.log(name, time, category);
+            return;
+        }
+
+        gtag('event', 'timing_complete', {
+            'name' : name,
+            'value' : time,
+            'event_category' : category
+        });
+    };
+}
diff --git a/src/utils/NetworkCalls.js b/src/utils/NetworkCalls.js
index e05fdd6..fb59c5c 100644
--- a/src/utils/NetworkCalls.js
+++ b/src/utils/NetworkCalls.js
@@ -21,6 +21,8 @@ import metaScraper from 'meta-scraper';
 import Ajax from './Ajax';
 import store from '../store';
 import appConfig from '../../application-configuration';
+import Performance from './Performance';
+import Analytics from './Analytics';
 
 /**
  * NetworkCalls class that will contain all network requests that are made throughout the application
@@ -34,9 +36,19 @@ import appConfig from '../../application-configuration';
 export const getLinkId = async () => {
   const { links } = store.getters;
   const ui = store.getters['ui/ui'];
+  Performance.mark('start_generating_id');
+
   const response = await Ajax.post(`${appConfig.cloudFunctionsUrl}/getLink`, { links, ui });
-  const { body: { id } } = response;
 
+  Performance.mark('finish_generating_id');
+  Performance.measure('time_to_generate_id', 'start_generating_id', 'finish_generating_id');
+  const timing = Performance.getEntriesByName('time_to_generate_id');
+  if (timing !== false) {
+    const { duration } = timing[0];
+    Analytics.FireTiming('time_to_generate_id', Math.round(duration));
+  }
+
+  const { body: { id } } = response;
   return id;
 };
 
diff --git a/src/utils/Performance.js b/src/utils/Performance.js
new file mode 100644
index 0000000..9458ffc
--- /dev/null
+++ b/src/utils/Performance.js
@@ -0,0 +1,48 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Abstract class for the window.performance browser API
+ * If performance isn't in the browser for some reason, this class will at least allow the application to continue
+ * on without anything breaking
+ */
+export default class Performance {
+    static now() {
+        if (!window.performance) return false;
+
+        return window.performance.now();
+    }
+
+    static mark(name) {
+        if (!window.performance) return false;
+
+        window.performance.mark(name);
+    }
+
+    static measure(name, start, end) {
+        if (!window.performance) return false;
+
+        window.performance.measure(name, start, end);
+    }
+
+    static getEntriesByName(name) {
+        if (!window.performance) return false;
+
+        return window.performance.getEntriesByName(name);
+    }
+}