refactor: import icons instead of require.context

- fix image path for empty list

src/components/Icon.vue

@@ -7,40 +7,43 @@
   />
 </template>
 
-<script>
+<script lang="ts">
-const components = {};
+import icons12 from './Icons/12';
-const requireComponent = require.context('./Icons', true, /\w+\.(vue)$/);
+import icons18 from './Icons/18';
+import icons24 from './Icons/24';
+import icons8 from './Icons/8';
 
-requireComponent.keys().forEach(fileName => {
+const components = {
-  const componentConfig = requireComponent(fileName);
+  8: icons8,
-
+  12: icons12,
-  let match = fileName.match(/\.\/(\d+)\/((\w|-)+).vue/);
+  18: icons18,
-  let [, size, name] = match || [];
+  24: icons24,
-
+} as const;
-  if (name) {
-    components[size] = components[size] || {};
-    components[size][name] = componentConfig.default || componentConfig;
-  }
-});
 
+type IconSize = '8' | '12' | '18' | '24';
 export default {
   name: 'Icon',
-  props: ['name', 'active', 'size', 'height'],
+  props: {
+    name: { type: String, required: true },
+    active: { type: Boolean, default: false },
+    size: {
+      type: String,
+      required: true,
+    },
+    height: Number,
+  },
   computed: {
     iconComponent() {
-      try {
+      const map = components[this.size as IconSize];
-        return components[this.size][this.name];
+      return map[this.name as keyof typeof map] ?? null;
-      } catch (error) {
-        return null;
-      }
     },
     iconClasses() {
       let sizeClass = {
-        '8': 'w-2 h-2',
+        8: 'w-2 h-2',
-        '12': 'w-3 h-3',
+        12: 'w-3 h-3',
-        '16': 'w-4 h-4',
+        16: 'w-4 h-4',
-        '18': 'w-5 h-5',
+        18: 'w-5 h-5',
-        '24': 'w-6 h-6'
+        24: 'w-6 h-6',
       }[this.size];
 
       if (this.height) {
@@ -48,7 +51,7 @@ export default {
       }
 
       return [sizeClass, 'fill-current'];
-    }
+    },
-  }
+  },
 };
 </script>

src/components/Icons/12/index.ts

@@ -0,0 +1,16 @@
+import ArrowLeftRight from './arrow-left-right.vue';
+import DragHandle from './drag-handle.vue';
+import Filter from './filter.vue';
+import List from './list.vue';
+import Select from './select.vue';
+import Sidebar from './sidebar.vue';
+
+// prettier-ignore
+export default {
+  'arrow-left-right': ArrowLeftRight,
+  'drag-handle': DragHandle,
+  'filter': Filter,
+  'list': List,
+  'select': Select,
+  'sidebar': Sidebar,
+};

src/components/Icons/16/index.ts

@@ -0,0 +1,38 @@
+import AccountIn from './account-in.vue';
+import Address from './address.vue';
+import Assets from './assets.vue';
+import Calendar from './calendar.vue';
+import Circle from './circle.vue';
+import DownSmall from './down-small.vue';
+import Down from './down.vue';
+import Expenses from './expenses.vue';
+import Income from './income.vue';
+import Items from './items.vue';
+import Liabilities from './liabilities.vue';
+import Mail from './mail.vue';
+import Normal from './normal.vue';
+import Opened from './opened.vue';
+import Phone from './phone.vue';
+import Plus from './plus.vue';
+import Search from './search.vue';
+
+// prettier-ignore
+export default {
+  'account-in': AccountIn,
+  'address': Address,
+  'assets': Assets,
+  'calendar': Calendar,
+  'circle': Circle,
+  'down-small': DownSmall,
+  'down': Down,
+  'expenses': Expenses,
+  'income': Income,
+  'items': Items,
+  'liabilities': Liabilities,
+  'mail': Mail,
+  'normal': Normal,
+  'opened': Opened,
+  'phone': Phone,
+  'plus': Plus,
+  'search': Search,
+}

src/components/Icons/18/index.ts

@@ -0,0 +1,52 @@
+import Check from './check.vue';
+import CommonEntries from './common-entries.vue';
+import Customer from './customer.vue';
+import Dashboard from './dashboard.vue';
+import Fb from './fb.vue';
+import General from './general.vue';
+import Gst from './gst.vue';
+import Inventory from './inventory.vue';
+import Invoice from './invoice.vue';
+import Item from './item.vue';
+import Mail from './mail.vue';
+import OpeningAc from './opening-ac.vue';
+import Percentage from './percentage.vue';
+import Property from './property.vue';
+import PurchaseInvoice from './purchase-invoice.vue';
+import Purchase from './purchase.vue';
+import Reports from './reports.vue';
+import ReviewAc from './review-ac.vue';
+import SalesInvoice from './sales-invoice.vue';
+import Sales from './sales.vue';
+import Settings from './settings.vue';
+import Start from './start.vue';
+import Supplier from './supplier.vue';
+import System from './system.vue';
+
+// prettier-ignore
+export default {
+  'check': Check,
+  'common-entries': CommonEntries,
+  'customer': Customer,
+  'dashboard': Dashboard,
+  'fb': Fb,
+  'general': General,
+  'gst': Gst,
+  'inventory': Inventory,
+  'invoice': Invoice,
+  'item': Item,
+  'mail': Mail,
+  'opening-ac': OpeningAc,
+  'percentage': Percentage,
+  'property': Property,
+  'purchase-invoice': PurchaseInvoice,
+  'purchase': Purchase,
+  'reports': Reports,
+  'review-ac': ReviewAc,
+  'sales-invoice': SalesInvoice,
+  'sales': Sales,
+  'settings': Settings,
+  'start': Start,
+  'supplier': Supplier,
+  'system': System,
+}

src/components/Icons/24/index.ts

@@ -0,0 +1,18 @@
+
+
+import General from './general.vue';
+import GreenCheck from './green-check.vue';
+import Invoice from './invoice.vue';
+import Mail from './mail.vue';
+import Privacy from './privacy.vue';
+import System from './system.vue';
+
+// prettier-ignore
+export default {
+  'general': General,
+  'green-check': GreenCheck,
+  'invoice': Invoice,
+  'mail': Mail,
+  'privacy': Privacy,
+  'system': System, 
+}

src/components/Icons/8/index.ts

@@ -0,0 +1,24 @@
+import ArrowRight from './arrow-right.vue';
+import ChevronLeft from './chevron-left.vue';
+import ChevronRight from './chevron-right.vue';
+import Circle from './circle.vue';
+import DotHorizontal from './dot-horizontal.vue';
+import DotVertical from './dot-vertical.vue';
+import Pencil from './pencil.vue';
+import Plus from './plus.vue';
+import Up from './up.vue';
+import X from './x.vue';
+
+// prettier-ignore
+export default {
+  'arrow-right': ArrowRight,
+  'chevron-left': ChevronLeft,
+  'chevron-right': ChevronRight,
+  'circle': Circle,
+  'dot-horizontal': DotHorizontal,
+  'dot-vertical': DotVertical,
+  'pencil': Pencil,
+  'plus': Plus,
+  'up': Up,
+  'x': X,
+}

src/components/Sidebar.vue

@@ -41,8 +41,8 @@
             class="flex-shrink-0"
             :name="group.icon"
             :size="group.iconSize || '18'"
-            :height="group.iconHeight"
+            :height="group.iconHeight ?? 0"
-            :active="isGroupActive(group)"
+            :active="!!isGroupActive(group)"
             :class="isGroupActive(group) && !group.items ? '-ms-1' : ''"
           />
           <div

src/pages/ListView/List.vue

@@ -80,7 +80,7 @@
       v-if="!data?.length"
       class="flex flex-col items-center justify-center my-auto"
     >
-      <img src="src/assets/img/list-empty-state.svg" alt="" class="w-24" />
+      <img src="../../assets/img/list-empty-state.svg" alt="" class="w-24" />
       <p class="my-3 text-gray-800">{{ t`No entries found` }}</p>
       <Button type="primary" class="text-white" @click="$emit('makeNewDoc')" v-if="canCreate">
         {{ t`Make Entry` }}

src/utils/sidebarConfig.ts

@@ -140,7 +140,7 @@ async function getCompleteSidebar(): Promise<SidebarConfig> {
       route: '/get-started',
       icon: 'general',
       iconSize: '24',
-      iconHeight: '5',
+      iconHeight: 5,
       hidden: () => fyo.singles.SystemSettings!.hideGetStarted as boolean,
     },
     {

src/utils/types.ts

@@ -51,7 +51,7 @@ export interface SidebarRoot {
   route: string;
   icon: string;
   iconSize?: string;
-  iconHeight?: string;
+  iconHeight?: number;
   hidden?: () => boolean;
   items?: SidebarItem[];
   filters?: QueryFilter;