web-admin/src/components/svg-icon/index.vue

<template>
  <component :is="iconComponent" class="svg-icon" :fill="fill"></component>
</template>

<script setup lang="ts">
  import { snakeToHump } from '@/utils/utils';
  import { computed } from 'vue';
  import IconHome from '../../assets/svgs/icon-home.svg?component';
  import IconLogout from '../../assets/svgs/icon-logout.svg?component';
  import IconOrg from '../../assets/svgs/icon-org.svg?component';
  import IconSystem from '../../assets/svgs/icon-system.svg?component';
  import IconUser from '../../assets/svgs/icon-user.svg?component';
  import IconImport from '../../assets/svgs/icon-import.svg?component';
  import IconAdd from '../../assets/svgs/icon-add.svg?component';
  import IconDelete from '../../assets/svgs/icon-delete.svg?component';
  import IconApply from '../../assets/svgs/icon-apply.svg?component';
  import IconAssign from '../../assets/svgs/icon-assign.svg?component';
  import IconPrint from '../../assets/svgs/icon-print.svg?component';
  import IconFile from '../../assets/svgs/icon-file.svg?component';
  import IconSuccess from '../../assets/svgs/icon-success.svg?component';
  import IconError from '../../assets/svgs/icon-error.svg?component';
  import IconBase from '../../assets/svgs/icon-base.svg?component';

  defineOptions({
    name: 'SvgIcon',
  });

  const props = withDefaults(
    defineProps<{
      name: string;
      fill?: string;
    }>(),
    {
      fill: 'currentColor',
    }
  );

  const icons = {
    IconHome,
    IconLogout,
    IconOrg,
    IconSystem,
    IconUser,
    IconImport,
    IconAdd,
    IconDelete,
    IconApply,
    IconAssign,
    IconPrint,
    IconFile,
    IconSuccess,
    IconError,
    IconBase,
  };

  const iconName = snakeToHump(props.name) as keyof typeof icons;

  const iconComponent = computed(() => icons[iconName]);
</script>