Svelte Avatar
An avatar component for Svelte
Svelte Avatar
A simple avatar component for Svelte.
This component display an avatar image with fallback to the name initials. This component is inspired from react-user-avatar and vue-avatar.
Installation
npm install svelte-avatar
Note: Svelte 5 is required as a peer dependency.
Usage
with image:
<script>
import { Avatar } from "svelte-avatar";
</script>
<Avatar name="John Walker" src="https://avatars0.githubusercontent.com/u/6810985?s=460&u=a2a24f33ad8d17377cef8163f596a7fbd1501cd4&v=4" />
with name:
<script>
import { Avatar } from "svelte-avatar";
</script>
<Avatar name="John Walker" />
Prop
| Name | Required | Default | Type | Description |
|---|---|---|---|---|
| style | N | - | String | Style property for avatar wrapper. |
| name | N | Avatar | String | The name that will be used to compute user initial (when 'src' property not set). |
| initials | N | - | String | Force the displayed initials by overriding the computed ones. |
| src | N | - | String | Path to the avatar image to display. |
| bgColor | N | lightGray | String | The avatar background color to use if no image is provided. |
| textColor | N | white | String | The font color used to render the user initials. |
| size | N | 50px | String | The avatar size. |
| borderRadius | N | 50% | String | The border-radius css property of avatar. |
| square | N | false | Boolean | If true, Avatar will be a Square |
| randomBgColor | N | false | Boolean | If true, Avatar background will be colored randomly |
Build Setup
# install dependencies
npm install
# start docs dev server at localhost:5173
npm run dev
# build docs site
npm run build
# build the library (outputs to dist/)
npm run package
# preview the built docs site
npm run preview
Test
npm test
NPM Statistics
Download stats for this NPM package
License
Released under the MIT License.
