feat(Icon): add new theme affecting strokes

Author: dewita

assets/css/_symbols.scss

@@ -2,52 +2,104 @@
 
 .theme--default {
   fill:$PRIMARY_COLOR;
+
+  &--stroke {
+    stroke:$PRIMARY_COLOR;
+  }
 }
 
 .theme--primary-color {
   fill: $PRIMARY_COLOR;
+
+  &--stroke {
+    stroke:$PRIMARY_COLOR;
+  }
 }
 
 .theme--primary-color-light {
   fill: $PRIMARY_COLOR_LIGHT;
+
+  &--stroke {
+    stroke:$PRIMARY_COLOR_LIGHT;
+  }
 }
 
 .theme--secondary-color {
   fill: darken($SECONDARY_COLOR, 12);
+
+  &--stroke {
+    stroke:darken($SECONDARY_COLOR, 12);
+  }
 }
 
 .theme--ternary-color {
   fill: $TERNARY_COLOR;
+
+  &--stroke {
+    stroke:$TERNARY_COLOR;
+  }
 }
 
 .theme--red {
   fill: $RED;
+
+  &--stroke {
+    stroke:$RED;
+  }
 }
 
 .theme--green {
   fill: $GREEN;
+
+  &--stroke {
+    stroke:$GREEN;
+  }
 }
 
 .theme--grey {
   fill: $GREY;
+
+  &--stroke {
+    stroke:$GREY;
+  }
 }
 
 .theme--grey-light {
   fill:lighten($GREY, 20);
+
+  &--stroke {
+    stroke:lighten($GREY, 20);
+  }
 }
 
 .theme--red-light {
   fill:$LIGHT_RED;
+
+  &--stroke {
+    stroke:$LIGHT_RED;
+  }
 }
 
 .theme--orange {
-  fill:$ORANGE
+  fill:$ORANGE;
+
+  &--stroke {
+    stroke:$ORANGE;
+  }
 }
 
 .theme--yellow {
-  fill:$YELLOW
+  fill:$YELLOW;
+
+  &--stroke {
+    stroke:$YELLOW;
+  }
 }
 
 .theme--white {
   fill:white;
+
+  &--stroke {
+    stroke:white;
+  }
 }

components/Symbols/Icon.vue

@@ -41,6 +41,7 @@
       paper: () => import('./library/PaperSymbol.vue'),
       bookmark: () => import('./library/BookmarkSymbol.vue'),
       mail: () => import('./library/MailSymbol.vue'),
+      clock: () => import('./library/ClockSymbol.vue'),
       book: () => import('./library/BookSymbol.vue')
     }
   })

components/Symbols/Symbol.vue

@@ -1,10 +1,14 @@
 <script lang="ts">
-    import {Component, Vue, Prop} from 'vue-property-decorator'
+  import {Component, Vue, Prop} from 'vue-property-decorator'
 
-    @Component({
-        name: 'SymbolLogo'
-    })
-    export default class Symbol extends Vue {
-        @Prop({type: String, default: "theme--default"}) readonly theme?: string;
+  @Component({
+    name: 'SymbolLogo'
+  })
+  export default class Symbol extends Vue {
+    @Prop({type: String, default: "theme--default"}) readonly theme?: string;
+
+    get themeStroke() {
+      return this.theme + '--stroke';
     }
+  }
 </script>

components/Symbols/library/ClockSymbol.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path :class="themeStroke" d='M256,64C150,64,64,150,64,256s86,192,192,192,192-86,192-192S362,64,256,64Z' style='fill:none;stroke-miterlimit:10;stroke-width:32px'/><polyline :class="themeStroke" points='256 128 256 272 352 272' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
+</template>
+
+<script lang="ts">
+  import Symbol from "../Symbol.vue";
+  import {Component, Mixins} from 'vue-property-decorator'
+
+  @Component
+  export default class ClockSymbol extends Mixins(Symbol) {}
+</script>