search

codefeathers / rollup-plugin-svelte-svg

Import SVG files as Svelte Components
MIT License
75 stars 13 forks source link

Event support #11

Open janosh opened 3 years ago

janosh commented 3 years ago

It would be cool if SVG components supported events. Right now, something like this doesn't work:

<script>
import Icon from './my-icon.svg'
</script>

<Icon on:click={() => console.log(`hi`)} />

Instead, you need to wrap the SVG in a DOM element, e.g.

<span on:click={() => console.log(`hi`)}>
  <Icon />
</span>

Anything this package could do to enable the first version? Still learning how the Svelte compiler works so this might be a dumb question.

MKRhere commented 3 years ago

I'm sure you understand the Svelte limitation that kept me from implementing this, and the issue you linked from reflects this. There's simply no way to lazily bind to all events / pass event listeners as props without defining all of them. There is now an rfc that might solve our problem: https://github.com/Sxxov/rfcs/blob/master/text/0000-spread-binding.md

I shall continue to leave this issue open until we can do this correctly in Svelte :) Thanks for the issue.