如何利用vscode-icons-js在Vue3项目中实现文件图标展示

npm install vscode-icons-js
# 或者
yarn add vscode-icons-js

<template>
  <img :src="iconSrc" alt="File icon" class="file-icon" :style="{ width: size + 'px', height: size + 'px' }" />
</template>
<script setup lang="ts">
  import { computed } from 'vue';
  import { getIconForFile, getIconForFolder, getIconForOpenFolder } from 'vscode-icons-js';
  const props = defineProps<{
    fileName: string;
    fileType: string;
    isOpen?: boolean;
    size?: number;
  }>();
  const iconSrc = computed(() => {
    let iconName: string | undefined = '';
    try {
      if (props.fileType === 'folder') {
        iconName = props.isOpen ? getIconForOpenFolder(props.fileName) : getIconForFolder(props.fileName);
      } else {
        iconName = getIconForFile(props.fileName);
      }
    } catch (error) {
      iconName = 'default_icon.svg'; // 提供一个默认的图标
    }
    return new URL(`/icons/${iconName}`, import.meta.url).href;
  });
  const size = computed(() => props.size || 16);
</script>
<style scoped>
  .file-icon {
    width: 16px;
    height: 16px;
  }
</style>

<template>
  <div>
    <FileIcon fileName="example.txt" fileType="file" size="32" />
    <FileIcon fileName="documents" fileType="folder" :isOpen="true" size="32" />
  </div>
</template>
<script setup lang="ts">
  import FileIcon from './components/FileIcon.vue';
</script>