skeletonlabs
v3: Avatar component does not accept crossorigin prop or actions.
Describe the feature in detail (code, mocks, or screenshots encouraged)
In v2, you were able to pass an action to the Avatar component. This was useful for performing actions on the image after it loaded. In v3 however, this property has been removed. Also in v2, you could set additional props on the avatar such as crossorigin="anonymous", as they were passed to the internal img element. In v3 this is removed.
I'd like to request these features be added back in v3.
What type of pull request would this be?
Enhancement
Provide relevant links or additional information.
No response
Just keep in mind that Actions are not attributes, they are functional implementation that the Svelte compiler interfaces with. AFAIK they cannot be passed as a arbitrary prop, just like they can't be triggered at runtime. We have been pondering a convention for passing arbitrary props to components that require them, but I'm not sure we've settled on one yet. Ideally this needs to satisfy a few requirements:
- Ideally it's a convention that works cross-framework (Svelte 5 is closer to React in this regard now)
- If possible we should be able to target arbitrary properties to multiple component elements (think image + input in a single component)
- Rich Harris recently teased an alternative for Actions in Svelte that might solve some of this for us. Unfortunately I don't have a link and can't recall the name off hand. His RFC should still be somewhere on their GitHub.
I know this seems like a trivial add, but any PR must take into account the bigger picture here.
In the meantime, you could consider using the Fallback slot with your own <img> element. This would give you full control over it. In fact this is what we will be recommending for Image components like enhance:image for Svelte and the <Image> component from Next.js, Astro, etc.
The action was passed through the action prop on the element in v2, it wasn't arbitrary sorry.
Arbitrary props aren't completely necessary, but a crossorigin one could be implemented for avatars and other image-based components. Not sure if that's in-scope or would get messy however.
@itzTheMeow I'll quickly reiterate that the team and I are still evaluating this and similar issues as part of a larger sweeping change to component APIs in the future. Unfortunately I don't think we're going to be able to make headway on this prior to the v3 launch coming next week.
So I'm going bump this to our post-release milestone to revisit in the future. My prior advice will need to suffice as the interim solution for now:
In the meantime, you could consider using the Fallback slot with your own
element. This would give you full control over it. In fact this is what we will be recommending for Image components like enhance:image for Svelte and the <Image> component from Next.js, Astro, etc.
It's not perfect I know. But hopefully this can get you by for now.
Note this issue is now resolved via the new v4 component preview:
https://github.com/skeletonlabs/skeleton/discussions/3634
Avatars are one of two components we've released early with the new format. And they should allow spreading any number of arbitrary attributes at will. See the documentation linked from the discussion above for details.