Dedicated component for loading svg files

Hi,

I am basically trying to create a dedicated component for loading svg files.
The idea is to have a folder with these files and to be able to only pass a fileName to a child component props, which will then be used to import a file and assign it to the only component used in the child template. Maybe there is a better approach to achieving this.
I could not come up with a concise meaningful question formulation, so the results on Google were just not what i was looking for. I’d appreciate sharing some docs you might know about as well as your ideas how to approach this.

Thank you.

<!-- Parent component -->
<template>
  <DynamicImportComponent :fileName="file-name" />
</template>

<script>
export default {
  name: 'ParentComponent',
}
</script>
<!-- Child component as global component -->
<template>
  <MyDynamicComponent />
</template>

<script>
export default {
  name: 'DynamicImportComponent',
  components: {
    MyDynamicComponent: () => import(`~/assets/svg/${fileName}.svg?inline`)
  },
  props: {
    fileName: {
      type: String
    }
  }
}
</script>