Appearance

AsyncIcon Component ​

File Information ​

  • Path: app/components/miscellaneous/AsyncIcon.vue
  • Purpose: Dynamic SVG icon loader component that loads icons on demand
  • Type: Miscellaneous Component

Overview ​

The AsyncIcon component provides dynamic loading of SVG icon components from the svg/ folder. It uses Vue's defineAsyncComponent to lazy load icons, improving performance by only loading icons when needed.

Features ​

  • Dynamic Loading: Loads SVG icons on demand
  • Error Handling: Falls back to fileIcon if icon fails to load
  • Props Forwarding: Forwards all props to the loaded icon component
  • Reactive: Watches for name changes and reloads icon
  • Performance: Lazy loading reduces initial bundle size

Props ​

typescript
{
  name: string          // Icon name (required) - corresponds to file in svg/ folder
  color?: string        // Icon color (default: '#3D3D3D')
  width?: number        // Icon width
  height?: number       // Icon height
  // ... other props forwarded to SVG component
}

Behavior ​

Icon Loading ​

  • Dynamically imports icon from ~/components/svg/{name}.vue
  • 200ms delay before loading
  • 3000ms timeout
  • Falls back to fileIcon on error

Error Handling ​

  • Catches import errors
  • Logs error to console
  • Displays fallback icon (fileIcon)
  • Resets error state on name change

Name Watching ​

  • Watches for name prop changes
  • Resets error state when name changes
  • Reloads icon component

Usage Example ​

vue
<template>
  <!-- Basic usage -->
  <AsyncIcon name="downloadIcon" />
  
  <!-- With color and size -->
  <AsyncIcon 
    name="searchIcon" 
    color="#6473FF" 
    :width="24" 
    :height="24" 
  />
  
  <!-- In button -->
  <v-btn icon>
    <AsyncIcon name="closeIcon" color="#FFFFFF" />
  </v-btn>
</template>

<script setup lang="ts">
import AsyncIcon from '~/components/miscellaneous/AsyncIcon.vue'
</script>

Available Icons ​

Icons are located in app/components/svg/ folder. Common icons include:

  • Navigation: homeIcon, folderIcon, searchIcon, menuIcon
  • Actions: downloadIcon, uploadIcon, editIcon, deleteIcon, shareIcon
  • Media: imageIcon, videoIcon, audioIcon, fileIcon
  • UI: closeIcon, checkIcon, downArrowIcon, dropdownIcon
  • Payment: paymentVisaIcon, paymentMasterCardIcon, paymentAmexIcon
  • Snackbar: SnackbarSuccess, SnackbarError, SnackbarWarning, SnackbarInfo
  • And 100+ more icons...

Best Practices ​

  1. Use consistent icon names - Icon name must match file name in svg/ folder
  2. Provide fallback - Component handles errors, but ensure icon exists
  3. Use appropriate sizes - Set width/height for consistent sizing
  4. Set colors - Use color prop for theming
  5. Avoid direct imports - Use AsyncIcon instead of importing SVG components directly
  • All SVG icon components in svg/ folder
  • Components that use icons throughout the application