Calling array object in src does not work-CodePudding

I have an array :

let x = '';
let elements = [
            { icon:"Home",name:'Home',page:'Page1' },
            { icon:'Cube',name:'New',page:'Page2' }];

I am looping in it:

{#each elements as { icon, name, page }, i}
                        
                        <Icon src={icon} size="24" />

This here does not work: src={icon}

Correct way should be like this:

<Icon src="{Filter}" solid />

If I replace the {icon} with string it works! Can someone tell me why? Thank you

CodePudding user response：

i have used p tag instead of icon but you can use or generated icon with

CodePudding user response：

You have to import the icon names and use in elements array without quotes.

    <script>
    import { Icon, Home, Cube } from "svelte-hero-icons";
    let elements = [
       { icon: Home, name: "Home", page: "Page1" },
       { icon: Cube, name: "New", page: "Page2" }];
    </script>

    <div>
    {#each elements as { icon, name, page }, i}
        <Icon src={icon} size="32" />
    {/each}
    </div>