In the structure of the project there is a catalog with components, each stores its own SVG code. There is an independent component of the block in which data comes through props . How to dynamically connect the necessary component with an icon (there should be 5 blocks, each has its own SVG (component vue))? I thought about the slots, but you can only transfer content to them or not?

 <template lang="pug"> section.feautures .features__row info-block(v-for="i in 4") star-icon(slot="icon", fill="#876543", width="24px", height="24px") </template>

    1 answer 1

    TL; DR : <component :is="componentName"></component>
    Documentation : Dynamic Component Switching

    Sometimes it is useful to dynamically switch between components, for example, in a tabbed interface:

    The above is made possible by the Vue <component> element with the special attribute is :

     <!-- Компонент меняется при изменении currentTabComponent --> <component :is="currentTabComponent"></component>

    In the example above, currentTabComponent may contain:

    • the name of the registered component, or
    • object with component settings

    See this fiddle to experiment with full code, or this version for an example of snapping to an object with component settings instead of specifying its name.

    Additional information is available in the documentation section of Dynamic & Asynchronous Components .

    did not think of anything better than just copy the section of documentation ...