How to insert a component in vue js props?

Question

Vue.js

One component looks like this

<template>
    <router-link :to="href" class="tabbar-item">
        <div class="icon"><component :is="icon"/></div>
        <div class="view-name">{{ viewName }}</div>
    </router-link>
</template>

I want to pass in props the component that should be rendered in the first

<TabBarItem href='Home' :icon="homeIcon" viewName="Дом"></TabBarItem>

The problem is that vue throws an error component has been registered but never used
I import like this:

<script>
import TabBarItem from '@/components/TabBarItem'
import iconHome from '@/components/icons/iconHome'

export default {
    components: {
        TabBarItem,
        iconHome
    },
    data(){
        return {
            homeIcon: iconHome
        }
    }
}
</script>

Answer 1

If I'm not mistaken, then a component that is not rendered does not need to be declared in the
UPD
components section . Well, in general, it would be better to use a named slot here. Or dynamic import something like this:

<template>
    <router-link :to="href" class="tabbar-item">
        <div class="icon"><component :is="iconComponent"/></div>
        <div class="view-name">{{ viewName }}</div>
    </router-link>
</template>


<script>
export default {
    props: ['iconName'],
    computed () {
        iconComponent() {
            return import('@/components/icons/' + this.iconName)
        }
    }
}
</script>