fix: Active Tab Icon color in Settings

src/components/Icons/18/dashboard.vue

@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from './base';
+import Base from '../base';
 export default {
   name: 'IconDashboard',
   extends: Base

src/components/Icons/18/purchase.vue

@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from './base';
+import Base from '../base';
 export default {
   name: 'IconPurchase',
   extends: Base

src/components/Icons/18/reports.vue

@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from './base';
+import Base from '../base';
 export default {
   name: 'IconReports',
   extends: Base

src/components/Icons/18/sales.vue

@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from './base';
+import Base from '../base';
 export default {
   name: 'IconSales',
   extends: Base

src/components/Icons/18/settings.vue

@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from './base';
+import Base from '../base';
 export default {
   name: 'IconSettings',
   extends: Base

src/components/Icons/24/general.vue

@@ -2,14 +2,21 @@
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <g fill="none" fill-rule="evenodd">
       <path
-        fill="#A1ABB4"
+        :fill="lightColor"
         d="M9.08530087,7.67123242 L7.56272248,8.97665406 L5.29306789,6.707 L4.00006789,8 L6.78885887e-05,4 L4.00006789,-3.55351234e-12 L8.00006789,4 L6.70706789,5.293 L9.08530087,7.67123242 Z M18.9400679,13.94 L22.9650679,17.964 C24.3460679,19.345 24.3460679,21.583 22.9650679,22.964 C21.5840679,24.345 19.3460679,24.345 17.9650679,22.964 L13.4470679,18.446 L17.0880679,13.947 C17.3920679,13.982 17.6950679,14 18.0000679,14 C18.3180679,14 18.6310679,13.976 18.9400679,13.94 Z"
       />
       <path
-        fill="#415668"
+        :fill="darkColor"
         fill-rule="nonzero"
         d="M20.2710679,6.771 L17.2290679,3.729 L20.4370679,0.521 C19.6920679,0.189 18.8690679,-1.77635684e-14 18.0000679,-1.77635684e-14 C14.6860679,-1.77635684e-14 12.0000679,2.686 12.0000679,6 C12.0000679,6.594 12.0890679,7.166 12.2500679,7.708 L1.46106789,16.438 C0.570067889,17.225 0.0380678886,18.357 0.00206788859,19.544 C-0.0349321114,20.732 0.426067889,21.895 1.26606789,22.734 C2.08206789,23.551 3.16706789,24 4.32106789,24 C5.56006789,24 6.74206789,23.468 7.56206789,22.539 L16.2920679,11.75 C16.8340679,11.911 17.4060679,12 18.0000679,12 C21.3140679,12 24.0000679,9.314 24.0000679,6 C24.0000679,5.131 23.8110679,4.308 23.4790679,3.562 L20.2710679,6.771 Z"
       />
     </g>
   </svg>
 </template>
+<script>
+import Base from '../base';
+export default {
+  name: 'IconGeneral',
+  extends: Base
+};
+</script>

src/components/Icons/24/invoice.vue

@@ -2,14 +2,21 @@
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <g fill="none" fill-rule="evenodd">
       <path
-        fill="#A1ABB4"
+        :fill="lightColor"
         d="M3.3,8.4 L0.45,5.55 C-0.15,4.95 -0.15,4.05 0.45,3.45 L3.45,0.45 C4.05,-0.15 4.95,-0.15 5.55,0.45 L8.4,3.3 L3.3,8.4 Z M20.7,15.6 L23.55,18.45 C23.85,18.75 24,19.05 24,19.5 L24,24 L19.5,24 C19.05,24 18.75,23.85 18.45,23.55 L15.6,20.7 L20.7,15.6 Z"
       />
       <path
-        fill="#415668"
+        :fill="darkColor"
         fill-rule="nonzero"
         d="M23.55,6.45 L17.55,0.45 C16.95,-0.15 16.05,-0.15 15.45,0.45 L13.5,2.4 L16.05,4.95 L13.95,7.05 L11.4,4.5 L9,6.9 L11.55,9.45 L9.45,11.55 L6.9,9 L4.5,11.4 L7.05,13.95 L4.95,16.05 L2.4,13.5 L0.45,15.45 C-0.15,16.05 -0.15,16.95 0.45,17.55 L6.45,23.55 C7.05,24.15 7.95,24.15 8.55,23.55 L23.55,8.55 C24.15,7.95 24.15,7.05 23.55,6.45 Z"
       />
     </g>
   </svg>
 </template>
+<script>
+import Base from '../base';
+export default {
+  name: 'IconInvoice',
+  extends: Base
+};
+</script>

src/components/Icons/24/mail.vue

@@ -2,14 +2,21 @@
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20">
     <g fill="none" fill-rule="evenodd">
       <path
-        fill="#415668"
+        :fill="lightColor"
         fill-rule="nonzero"
         d="M13.4,12.6 C12.9889642,12.8814251 12.4976701,13.0217949 12,13 C11.5023299,13.0217949 11.0110358,12.8814251 10.6,12.6 L0,6.9 L0,17 C2.02906125e-16,18.6568542 1.34314575,20 3,20 L21,20 C22.6568542,20 24,18.6568542 24,17 L24,6.9 L13.4,12.6 Z"
       />
       <path
-        fill="#A1ABB4"
+        :fill="darkColor"
         d="M21,-4.4408921e-16 L3,-4.4408921e-16 C1.34314575,-8.8817842e-16 4.60042228e-16,1.34314575 2.57135486e-16,3 L2.57135486e-16,4 C-0.00194326986,4.36673226 0.187596922,4.7079046 0.5,4.9 L11.5,10.9 C11.6535417,10.9808367 11.8271782,11.015564 12,11 C12.1728218,11.015564 12.3464583,10.9808367 12.5,10.9 L23.5,4.9 C23.8124031,4.7079046 24.0019433,4.36673226 24,4 L24,3 C24,1.34314575 22.6568542,2.22044605e-15 21,-4.4408921e-16 Z"
       />
     </g>
   </svg>
 </template>
+<script>
+import Base from '../base';
+export default {
+  name: 'IconMail',
+  extends: Base
+};
+</script>

src/components/Icons/24/privacy.vue

@@ -1,9 +1,16 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24">
     <path
-      fill="#415668"
+      :fill="darkColor"
       d="M20.0525217,2.11095652 C20.5302337,2.21715027 20.8699706,2.64106207 20.8695652,3.13043478 L20.8695652,13.5652174 C20.8695652,19.3281887 16.1977539,24 10.4347826,24 C4.67181131,24 2.30018902e-12,19.3281887 2.29787204e-12,13.5652174 L2.29787204e-12,3.13043478 C-0.000405357328,2.64106207 0.339331532,2.21715027 0.817043478,2.11095652 L10.2083478,0.024 C10.3575704,-0.00835725383 10.5119948,-0.00835725383 10.6612174,0.024 L20.0525217,2.11095652 Z M15.6521739,16.6956522 L15.6521739,11.4782609 C15.6521739,10.9019637 15.1849928,10.4347826 14.6086957,10.4347826 L13.5652174,10.4347826 L13.5652174,8.34782609 C13.5652174,6.6189347 12.163674,5.2173913 10.4347826,5.2173913 C8.70589122,5.2173913 7.30434783,6.6189347 7.30434783,8.34782609 L7.30434783,10.4347826 L6.26086957,10.4347826 C5.68457243,10.4347826 5.2173913,10.9019637 5.2173913,11.4782609 L5.2173913,16.6956522 C5.2173913,17.2719493 5.68457243,17.7391304 6.26086957,17.7391304 L14.6086957,17.7391304 C15.1849928,17.7391304 15.6521739,17.2719493 15.6521739,16.6956522 Z M10.4347826,7.30434783 C11.0110797,7.30434783 11.4782609,7.77152896 11.4782609,8.34782609 L11.4782609,10.4347826 L9.39130435,10.4347826 L9.39130435,8.34782609 C9.39130435,7.77152896 9.85848548,7.30434783 10.4347826,7.30434783 Z"
       transform="translate(.565)"
     />
   </svg>
 </template>
+<script>
+import Base from '../base';
+export default {
+  name: 'IconPrivacy',
+  extends: Base
+};
+</script>

src/components/Icons/24/system.vue

@@ -1,8 +1,15 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
-      fill="#415668"
+      :fill="darkColor"
       d="M20.872,13.453 C20.9537653,12.972909 20.9965715,12.4869919 21,12 C20.9965715,11.5130081 20.9537653,11.027091 20.872,10.547 L22.972,8.518 C23.3014584,8.19919706 23.371936,7.69719821 23.143,7.3 L21.643,4.7 C21.4110152,4.30446242 20.9414902,4.11509143 20.5,4.239 L17.7,5.039 C16.9419059,4.42152683 16.0884306,3.93146247 15.173,3.588 L14.47,0.758 C14.3589292,0.312671834 13.9589705,0.000126794654 13.5,0 L10.5,0 C10.0410295,0.000126794654 9.64107084,0.312671834 9.53,0.758 L8.823,3.588 C7.90897533,3.93185202 7.05687784,4.42190095 6.3,5.039 L3.5,4.239 C3.05853017,4.11546064 2.58922628,4.30474244 2.357,4.7 L0.857,7.3 C0.627535562,7.69743398 0.698040781,8.20004136 1.028,8.519 L3.128,10.548 C3.04628835,11.0277616 3.00348235,11.5133421 3,12 C3.00342848,12.4869919 3.04623467,12.972909 3.128,13.453 L1.028,15.482 C0.698541645,15.8008029 0.628063973,16.3028018 0.857,16.7 L2.357,19.3 C2.53580678,19.6097028 2.86638627,19.8003484 3.224,19.8 C3.31694619,19.7995843 3.40942403,19.7868055 3.499,19.762 L6.299,18.962 C7.05709407,19.5794732 7.91056935,20.0695375 8.826,20.413 L9.533,23.243 C9.64418563,23.6868483 10.0424394,23.9986148 10.5,24 L13.5,24 C13.9589705,23.9998732 14.3589292,23.6873282 14.47,23.242 L15.177,20.412 C16.0910247,20.068148 16.9431222,19.578099 17.7,18.961 L20.5,19.761 C20.589576,19.7858055 20.6820538,19.7985843 20.775,19.799 C21.1326137,19.7993484 21.4631932,19.6087028 21.642,19.299 L23.142,16.699 C23.3714644,16.301566 23.3009592,15.7989586 22.971,15.48 L20.872,13.453 Z M12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,13.060866 15.5785726,14.0782816 14.8284271,14.8284271 C14.0782816,15.5785726 13.060866,16 12,16 Z"
     />
   </svg>
 </template>
+<script>
+import Base from '../base';
+export default {
+  name: 'IconSystem',
+  extends: Base
+};
+</script>

src/pages/Settings/Settings.vue

@@ -20,7 +20,7 @@
           :class="i === activeTab && 'bg-white shadow text-blue-500'"
           @click="activeTab = i"
         >
-          <component :is="getIconComponent(tab)" />
+          <component :is="getIconComponent(tab)" :active="i === activeTab" />
           <div class="mt-2 text-xs">{{ tab.label }}</div>
         </div>
       </Row>
@@ -89,10 +89,13 @@ export default {
         render(h) {
           return h(Icon, {
             class: 'w-6 h-6',
-            props: {
-              name: tab.icon,
-              size: '24'
-            }
+            props: Object.assign(
+              {
+                name: tab.icon,
+                size: '24'
+              },
+              this.$attrs
+            )
           });
         }
       };