Add a style prop to the Avatar component

[Keagel]

Describe the feature in detail (code, mocks, or screenshots encouraged)

The Avatar is one of the components where it makes sense to have custom styling that goes beyond what tailwind classes can offer (ie. changing the background color of the avatar based on the user's name as a fallback when the user doesn't have a profile picture set). It was previously possible in Skeleton v2 using the style prop to pass arbitrary values.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

This is how I used to achieve that in Skeleton v2:

<Avatar
    src={avatarUrl}
    {initials}
    width="w-24"
    style="background-color: {backgroundColor}"
    fill="fill-white"
/>

[rxhul18]

How can i configure v3 version in mine

[endigo9740]

How can i configure v3 version in mine

I'm not entirely sure what you're asking here. But we cover most implementation details on the documentation here:

• https://next.skeleton.dev/docs/components/avatar/svelte

[phamduylong]

I can port the implementation from v2.

[rxhul18]

Is there any video or docs to clone and configure Skeleton v3 codebase?

[phamduylong]

Is there any video or docs to clone and configure Skeleton v3 codebase?

I assume you're asking for instruction on getting started with Skeleton v3. Those can be found from the installation page. The code is located in the next branch of the repo so you'll need to checkout into that branch to have a local copy.

Also, I'd suggest asking in Discord if you have more questions, this thread should only be used to discuss this specific issue.

[endigo9740]

@rxhul18 what Long said, but I'll append this as well if you're just looking for a high level overview of what it includes:

• Skeleton v3 Release Candidate 🎉 #3062

@phamduylong long that would be great! I'm not sure it'll be 1:1 with v2 as the Svelte 5 syntax may differ, but I'm sure they cover that in the docs. Also don't forget React the React version too please!