hrms-edm/Services/client/src/components/FileIcon.vue

<script setup lang="ts">
import { useFileInfoStore } from '@/stores/file-info-data'

const { mimeFileMapping } = useFileInfoStore()

defineProps<{ fileMimeType: string | undefined; size: string }>()

function getIcon(mimeType: string) {
  return mimeType && mimeFileMapping.hasOwnProperty(mimeType)
    ? mimeFileMapping[mimeType].icon
    : 'mdi-file-question-outline'
}
function getColor(mimeType: string) {
  return mimeType && mimeFileMapping.hasOwnProperty(mimeType)
    ? mimeFileMapping[mimeType].color
    : 'blue-11'
}
function getIconSize(s: string) {
  type SizeMapping = {
    [key: string]: string
  }
  const sizeMapping: SizeMapping = {
    preview: '6em',
    list: '2em',
  }
  return sizeMapping[s]
}
</script>

<template>
  <q-icon
    :name="fileMimeType && getIcon(fileMimeType)"
    :color="fileMimeType && getColor(fileMimeType)"
    :size="getIconSize(size)"
  />
</template>