From 455f3d65de721ca96a6d86f46a6e2718d50f4276 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 3 Mar 2020 10:54:24 +0100
Subject: [PATCH] Use classes for SVG globe icons

---
 src/atoms/IconGlobe.svelte       | 14 +-------------
 src/atoms/IconGlobeSmall.svelte  | 14 +-------------
 src/style/atoms/_icon-globe.scss | 20 ++++++++++++++++++++
 src/style/style.scss             |  1 +
 4 files changed, 23 insertions(+), 26 deletions(-)
 create mode 100644 src/style/atoms/_icon-globe.scss

diff --git a/src/atoms/IconGlobe.svelte b/src/atoms/IconGlobe.svelte
index cb1c752..ac0d28e 100644
--- a/src/atoms/IconGlobe.svelte
+++ b/src/atoms/IconGlobe.svelte
@@ -8,19 +8,7 @@
     const randomId2 = fn.randomString(6, 'A')
 </script>
 
-<style>
-    svg {
-        height: 100%;
-        overflow: hidden;
-    }
-    svg:after {
-        content: "";
-        display: block;
-        padding-bottom: 133.93%; /* 1.33 ratio */
-    }
-</style>
-
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} fill={color} viewBox="0 0 56 75">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} fill={color} viewBox="0 0 56 75" class="icon-globe">
     <defs>
         <ellipse id={randomId1} cx="31.5" cy="60.6" rx="24.5" ry="24.4"/>
     </defs>
diff --git a/src/atoms/IconGlobeSmall.svelte b/src/atoms/IconGlobeSmall.svelte
index 25c6ffa..6e6c29d 100644
--- a/src/atoms/IconGlobeSmall.svelte
+++ b/src/atoms/IconGlobeSmall.svelte
@@ -8,19 +8,7 @@
     const randomId2 = fn.randomString(6, 'A')
 </script>
 
-<style>
-    svg {
-        height: 100%;
-        overflow: hidden;
-    }
-    svg:after {
-        content: "";
-        display: block;
-        padding-bottom: 100%; /* 1:1 ratio */
-    }
-</style>
-
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} fill={color} viewBox="0 0 56 56">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} fill={color} viewBox="0 0 56 56" class="icon-globe icon-globe--small">
     <defs>
         <circle id={randomId1} cx="28.1" cy="28" r="26.6"/>
     </defs>
diff --git a/src/style/atoms/_icon-globe.scss b/src/style/atoms/_icon-globe.scss
new file mode 100644
index 0000000..f0548ef
--- /dev/null
+++ b/src/style/atoms/_icon-globe.scss
@@ -0,0 +1,20 @@
+// SVG Globe icon
+.icon-svg {
+    height: 100%;
+    overflow: hidden;
+
+    &:after {
+        content: "";
+        display: block;
+        padding-bottom: 133.93%; /* 1.33 ratio */
+    }
+
+    // Small size
+    &--small {
+        &:after {
+            content: "";
+            display: block;
+            padding-bottom: 100%; /* 1:1 ratio */
+        }
+    }
+}
diff --git a/src/style/style.scss b/src/style/style.scss
index 063f6d7..830af6a 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -17,6 +17,7 @@
 @import "atoms/button";
 @import "atoms/button-outline";
 @import "atoms/button-control";
+@import "atoms/icon-globe";
 @import "atoms/toggle";
 @import "atoms/link";
 @import "atoms/switcher";