helper function for iteration inside template

[basaran]

Hello, I'm trying to implement a standard component to return the icon tag dynamically.

    data: () => ({
        dashboard_links: [
            { icon: "AnnotationIcon", text: "Annotation", route: "/" },
            { icon: "MailIcon", text: "Mail", route: "/projects" },
        ],
});

Then, I would want to use a v-for and iterate out these links inside the <template>.

What would be the best way to accomplish this? I looked into <component :is> but that didn't work. v-html also didn't work.

I think a generic component with a prop would work, that would have some v-ifs inside, but that doesn't sound productive. Is there a way to access the render functions within the node_modules while outputting inside the template?

[basaran]

Actually, I was able to get it work. I got lost in the depths of rendering functions, dynamic component classes and didn't pay enough attention to the simplest :is props.

component(:is="link.icon", v-bind="{ size: '1.5x', class : 'nada '}")

In the future though, an h-icon implementation would be very helpful instead of rendering in individual compenents. bootstrap-vue has a similar build where they stack all definitions in one place.