title: Passing on:click event into dynamically created <svelte:component/>
body: <p>I basically need to be able to trigger something within one or more components (that
  are being dynamically added via svelte:component) when an icon/button within the parent 
  component is clicked. e.g. I need to hook the parts denoted with ** below:-</p>
  
  <pre><code>&lt;script&gt;
   let charts = [
      ChartA,
      ChartB,
      ChartC
    ];
  &lt;/script&gt;
  {#each charts as chart, i}
      &lt;div class="wrapper"&gt;
          &lt;div class="icon" on:click={**HowToPassClickEventToComponent**}&gt;&lt;/div&gt;
          &lt;div class="content"&gt;
          &lt;svelte:component this={charts[i]} {**clickedEvent**}/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  {/each}
  </code></pre>
  
  <p>I was able to get something working by unsing an array of props but each
  component is notified when the array changes so this is not very clean.</p>
  
  <p>I have searched both Google and StackOverflow as well as asking this question within the Svelte Discord channel with currently no luck.</p>
  
  <p><a href="https://svelte.dev/repl/fc91e089278848eba782f9ef994f534e?version=3.12.1" rel="noreferrer">Svelte Repl showing the problem</a></p>
  
  <p>This seems like such a simple requirement but after a couple of days I remain stuck so any advice on how to pass events into dynamic components is much appreciated.</p>