Dynamic import of SVG icon components-CodePudding

I'm trying to import SVG icons for each item in a v-for loop, with the filename changing depending on the item's id. The icons are loading, but I get the following error for each icon imported.

Is there a better way to approach this?

Uncaught (in promise) TypeError: Failed to resolve module specifier '~/assets/img/flags/ar.svg'

<template>
<NavigationItem v-for="item in topCountries">
    <template #icon>
        <component :is="getIcon(item.id)" />
    </template>
<NavigationItem />
</template>

<script setup>
const getIcon = (id) => defineAsyncComponent(() => 
    import(`~/assets/img/flags/${id}.svg`));
</script>

CodePudding user response：

calls each icon from the data. uses font awesome icons. you can also add svgs between the i tags

<template>
      <ul>
            <!-- list rendering -->
            <li v-for="item in items">
                    <span >
                        <i :  
                        aria-hidden="true"></i>
                    </span>
            </li>
        </ul>
</template>

<script>
export default {
    name: "navbarMobile",
    data() {
        return {
            //listItems
            items: [
                {
                    icon: 'home',
                },
               
                {
                    icon: 'wrench',
                },
               
                {
                    icon: 'project-diagram',
                    
                },
                  {
                    icon: 'cogs',


                },
                {
                    icon: 'phone',
                }
            ]
        }
    },
   
    methods: {
        faClass(icon) {
            return `fa fa-${icon}`;
          }
    }

}

</script>

CodePudding user response：

Us the component name instead of the component path. Also, don't forget to import SVG components and add ?inline at the end of the name.

<template>
<NavigationItem v-for="item in topCountries">
    <template #icon>
        <component :is="item.icon" />
    </template>
<NavigationItem />
</template>

<script setup>
import Eye from '~/assets/img/flags/Eye.svg?inline';
import Balls from '~/assets/img/flags/Balls.svg?inline';

const topCountries = [
  { icon: 'Eye' },
  { icon: 'Balls' }
]
</script>