feat: auto-load custom svg sprites from assets folder (#79)

BREAKING CHANGE: Build-in icons are prefixed with `gdoc_` now. If you use build-in icons in e.g. menus you have to rename these references!

src/sass/_base.scss

@@ -142,10 +142,10 @@ img {
     margin: 0;
     padding: 0;
 
-    .icon.menu {
+    .icon.gdoc_menu {
       display: inline-block;
     }
-    .icon.arrow-back {
+    .icon.gdoc_arrow_back {
       display: none;
     }
   }
@@ -183,21 +183,21 @@ img {
 
     &:not(:checked) {
       & ~ ul,
-      & ~ label .icon.keyborad_arrow_down {
+      & ~ label .icon.gdoc_keyborad_arrow_down {
         display: none;
       }
-      & ~ label .icon.keyborad_arrow_left {
+      & ~ label .icon.gdoc_keyborad_arrow_left {
         display: block;
       }
     }
 
     &:checked {
       & ~ ul,
-      & ~ label .icon.keyborad_arrow_down {
+      & ~ label .icon.gdoc_keyborad_arrow_down {
         display: block;
       }
 
-      & ~ label .icon.keyborad_arrow_left {
+      & ~ label .icon.gdoc_keyborad_arrow_left {
         display: none;
       }
     }

src/sass/_mobile.scss

@@ -67,11 +67,11 @@
   }
 
   #menu-control:checked ~ .gdoc-header .gdoc-nav__control {
-    .icon.menu {
+    .icon.gdoc_menu {
       display: none;
     }
 
-    .icon.arrow-back {
+    .icon.gdoc_arrow_back {
       display: inline-block;
     }
   }

src/sass/_utils.scss

@@ -18,6 +18,12 @@
   flex-wrap: wrap;
 }
 
+.flex-grid {
+  flex-direction: column;
+  border: $border-1 solid $gray-200;
+  border-radius: $border-radius;
+}
+
 .justify-start {
   justify-content: flex-start;
 }
@@ -50,6 +56,13 @@
   display: none;
 }
 
+.svg-sprite {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
 .badge-placeholder {
   display: inline-block;
   min-width: 4rem;